如何实现一个基于 Vue 的固定位置锚点组件功能？

本文共计4166个文字，预计阅读时间需要17分钟。

前言：近期小哥哥给我提出一个新需求，在一个页面滚动区域中添加一组定位按钮，点击按钮将对应的元素显示在页面的可视区域内。当按钮组超出页面可视区域时，将其固定在滚动条上。

前言

近期产品小哥哥给我提了一个新需求，在一个页面的滚动区中添加一组锚点定位按钮，点击按钮将对应的元素显示在页面的可视区中。当按钮组超出页面可视区的时候将其固定在滚动区域的头部，当滚动区滚动时，高亮距离滚动区顶部最近的元素所匹配的锚点按钮。

拆分功能点

现在我们已经明确需求了，接下来我们总结一下这个需求有哪些功能点：

• 按钮组要有吸顶效果
• 点击按钮要有锚点定位功能
• 滚动内容区需要找到对应的按钮并高亮

吸顶组件

要做一个吸顶效果最简单的方式是将 css 的 position 属性设置为 sticky， 这样就实现粘性布局。