本文主要介绍如何实现随着滚动条滚动到某个内容区域，导航选中状态随之切换，当点击的时候直接跳到点击的位置。
分析：我们要实现这种效果，首先得确定一个临界点，比如整个内容区域顶部（这里没有说是页面顶部，因为有可能这个效果只是在一个div盒子中实现）。那么我们如何找到内容区域顶部呢？。下面我们用代码来展现：
mounted() {
// 绑定滚动条滚动监听
window.addEventListener('scroll', this.handleScroll, false)
},
destroy() {
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
window.removeEventListener('scroll', this.handleScroll)
}
如上所示：我们监听了滚动条滚动，那么我们又将如何实现内容和导航条的联动呢？
handleScroll() {
// 获取所有锚点元素
const divs = [...document.querySelectorAll('div')]
// 所有锚点元素的 offsetTop
const offsetTopArr = []
// 将所有锚点元素offsetTop push到数组内
divs.forEach(item => {
offsetTopArr.push(item.offsetTop)
})
// 获取当前文档流的 scrollTop
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop
// 定义当前点亮的导航下标
let navIndex = 0
for (let n = 0; n < offsetTopArr.length; n++) {
// 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
// 那么此时导航索引就应该是 n 了
if (scrollTop >= offsetTopArr[n]) {
navIndex = n
}
}
// 把下标赋值给 vue 的 data
this.currentIndex = navIndex
}
上面就是实现了内容与导航条之间的跟随关系。
那么，点击导航条切换到指定内容 那就更加方便了
bindNavToView(e, index, item) {
this.currentIndex = index
if (item.hash) {
let dom = document.getElementById(item.hash)
dom.scrollIntoView()
}
},
上面主要涉及的是scrollIntoView，可以自行去查找该api的用法。
最后推一波： 个人博客，欢迎大家前来留言。
