怎么在Vue中实现一个吸顶锚点组件

这篇文章将为大家详细讲解有关怎么在 Vue中实现一个吸顶锚点组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供网站设计制作、成都网站设计、成都网页设计、重庆小程序开发、成都网站开发、成都网站制作、成都软件开发、App定制开发是成都本地专业的网站建设和网站设计公司，等你一起来见证！

拆分功能点

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

• 按钮组要有吸顶效果

• 点击按钮要有锚点定位功能

• 滚动内容区需要找到对应的按钮并高亮

吸顶组件

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

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

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

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

既然需要自己实现一个吸顶的效果，思考到其他页面可能也会使用的吸顶的功能，所以决定将其单独抽离成一个通用组件。首先我们知道粘性布局是对父级滚动元素定位，所以我们要先找到父级滚动元素，这个功能我们可以通过两种方式实现，一种是向上查找，一种是通过 props 传递一个唯一标识的 css 选择器。

我觉得其他项目可能也会遇到这个功能，所以我定义组件 尽量向着开源靠拢，所以我这里同时支持两种方案。首先我们要实现一个查找父级滚动元素的功能，如何判断一个元素是滚动元素呢？很简单判断其 `overflow` 是否是 `auto` 或者 `scroll`。

// util.js 文件
// 判断一个元素是否是滚动元素
const scrollList = ['auto', 'scroll']

export function hasScrollElement(el, direction = 'vertical') {
 if (!el) return
 const style = window.getComputedStyle(el)
 if (direction === 'vertical') {
 return scrollList.includes(style.overflowY)
 } else if (direction === 'horizontal') {
 return scrollList.includes(style.overflowX)
 }
}

// 获取第一个滚动元素
export function getFirstScrollElement(el, direction = 'vertical') {
 if (!el) return
 if (hasScrollElement(el, direction)) {
 return el
 } else {
 return getFirstScrollElement(el && el.parentElement, direction)
 }
}

这里说下实现吸顶效果所需要的一些基础知识：

• fixed 定位是相对于浏览器的可视区进行定位，这意味着即使页面滚动，它还是会固定在相同的位置

• offsetTop 是一个只读的属性，它返回当前元素相对于距离它最近的父级定位元素顶部的距离。

• scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素值，`scrollTop` 表示这个元素达到父级滚动元素顶部的距离。

.cpt-sticky {
 .top-fixed {
 position: fixed;
 width: 100%;
 background: #fff;
 }
}

就像上面的示例代码一样，短短几十行就实现了一个吸顶组件，不过它实现了吸顶的功能，但是还有一些缺陷。

1. 在慢速滚动页面，吸顶组件在固定与非固定的时候有明显的卡顿现象。

2. 由于我的需求有一些是需要做锚点定位功能，但是直接用锚点定位会改变路由所以改为了滚动定位（后面会细说）。但是由于吸顶组件在 `fixed` 之后会脱离文档流，导致定位的元素会有一部分（吸顶组件高度 ）被卡在吸顶组件下方。就像下面这张图的效果，右边的锚点定位2区域的标题被隐藏了。

这些问题也很好解决，使用一个和吸顶组件相同大小的占位元素，当吸顶组件脱离文档流之后，占位元素插入吸顶组件原来的 DOM 位置中，然后顺便带上一些小优化。由于占位元素需要和组件高度一致，所以必须要保证 `slot` 插槽中的 DOM 元素已经被加载完成，另外放在 slot 元素中可能发生变更，所以我在吸顶状态变更之前获取其高度。

.cpt-sticky {
 .top-fixed {
 position: fixed;
 width: 100%;
 background: #fff;
 }
}

锚点定位

网页中经常会有用到锚点定位的场景，例如百度知道的目录，我目前知道有三种方式可以实现这种功能。

1. 使用 a 标签定位

2. 使用 js 定位

使用 a 标签定位

先说说 a 标签定位，这是一种最常用的定位方式。它有两种实现方式，一种是通过 herf 属性链接的指定元素的 id。另一种是添加一个 a 标签，再将 href 属性链接到这个 a 标签的 name 属性。

按钮1
按钮1
...
视图1