如何将Vue吸顶锚点组件改写为长尾词？

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

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

前言

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

拆分功能点

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

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

吸顶组件

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

.sticky-container { position: sticky; top: 0px; }

上面的示例仅仅用了两行 css 的代码就实现了粘性布局，但由于 IE 浏览器完全不支持粘性布局，而我的项目又需要支持一部分的 IE 浏览器，所以就需要手动去实现这样一个功能。

MDN 官方对粘性布局的解释是这样的，粘性布局元素默认是相对定位的，当粘性元素超出父元素的指定值（如 `top` 、`left` 等），例如上面的示例，当元素粘性元素改为固定定位。关于父级元素 MDN 描述的不是很精确，这里的父级元素指的是父级滚动元素，如果没有父级滚动元素则将 `body` 元素作为父级元素。