Vue仿bilibili左右菜单导航联动效果

先看b站的效果，是当页面滚动时左边的菜单到达某个位置后，右侧的导航条对应的导航会高亮，然后点击右侧导航的某项时，页面会滚动到对应的菜单。

说到这呢，其实心里也大概会有点头绪，点击的效果类似tab栏切换，只是需要滚动而已，而滚动页面时则需要记录滚动值来进行右侧导航栏的高亮显示。好了，话不多说，先来看看需要哪些东西！

思路

首先，我们需要开启页面的滚动事件来记录滚动值,在页面加载完成后开启scroll事件，这样滚动时可以获取到滚动值，然后我们在滚动时通过对比 滚动距离和左侧菜单块距离顶部高度的差值来确定右侧菜单的索引值，好像不是很好理解，简化一点就是，比如咱们滚动了800的距离，而第一个菜单项距离顶部高度为700，此时右侧的索引值则为0.点击滚动切换也是一样的意思，是通过offsetTop来获取元素距离顶部父元素的高度

 mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

handleScroll(){
  console.log(window.scrollY); //页面滚动值
}

然后我们开始搭结构，我随意写的demo哈

// 左侧菜单
 <div class="nav">
      <div ref="navWrapper" class="nav-wrapper" v-for="(item,index) in navList" :key="index">
        <div class="menu-title">{{item.title}}</div>
        <div class="flex-start">
          <div class="menu-wrapper" v-for="(menu,index) in item.children" :key="index">
            <div>{{menu.title}}</div>
         </div>
       </div>
     </div>
  </div>

//右侧导航
  <div class="elevator">
     <div class="list-box">
      <div v-for="(item,index) in menuList" :key="index" class="item" @click="jump(index)" :class="activeMenu === index ? 'active' : ''">{{item}}</div>
     </div>
  </div>

模拟数据结构

页面效果

实现

然后来实现点击右侧导航，页面滚动到对应区域。这里应该很好理解，就是传一个索引进来，点击时修改对应索引值。重要的是document.documentElement.scrollTop这个方法，该方法是获取滚动条的位置，也可以设置。i也就是跳转到对应的第几个菜单。

 jump(i) {
      this.activeMenu = i;
      document.documentElement.scrollTop = this.$refs.navWrapper[i].offsetTop;
      // console.log(this.$refs.navWrapper[i].offsetTop); //
    },

还记得之前在mounted里加载的handleScroll方法吗，现在开始记录滚动

 handleScroll() {
      // console.log(window.scrollY);
      let arr = this.$refs.navWrapper;
      let scrollY = window.scrollY;
      if (scrollY < 700) {
        this.activeMenu = -1;
      }
      for (var i = 0; i < arr.length; i++) {
        if (scrollY + 50 > arr[i].offsetTop) {
          this.activeMenu = i;
        }
      }
    },

以上代码的意思就是在滚动时进行对比差值 ，scrollY +50 是因为我想在每个菜单顶部上面一点点就切换（b站好像是这样这样的~~）不加也无所谓。以下是效果gif，

以上就完成了左右联动啦！！！也不知道我说的清不清楚，若有更好的方法，也可以和我讨论哈。
码字不易，还望点个赞哈！！！