js在vue基础上实现导航条与内容的联动

本文主要介绍如何实现随着滚动条滚动到某个内容区域，导航选中状态随之切换，当点击的时候直接跳到点击的位置。
分析：我们要实现这种效果，首先得确定一个临界点，比如整个内容区域顶部（这里没有说是页面顶部，因为有可能这个效果只是在一个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的用法。
最后推一波： 个人博客，欢迎大家前来留言。