vue双向定位导航效果

需求：实现双向定位导航效果，点击左侧菜单，右侧滚动到相应的位置。滚动右边，左侧相应菜单高亮。

html代码：

<ul class="EntTake_main_left" :class="{ 'fixed-menu': fixedMenu }">
  <li
    class="forensics-main-item nav1"
    v-for="(val, index) in menuList"
    :key="index"
    :class="menuClickIndex === index ? 'clickStyle' : ''"
    @click="clickMenu(index)"
  >
    {{ val }}
  </li>
</ul>

data里定义数据：

isFixed: false,
fixedMenu: false,
scrollTop: 0,
menuList: [
    '课程信息',
    '课程及收费依据',
    '报名政策',
    '所需材料信息',
    '培训流程',
    '证书样本',
    '常见问题'
],
menuClickIndex: 0,

js中代码：

methods: {
　　// 点击左侧菜单
   clickMenu(index) {
   　  this.menuClickIndex = index;
       const jump = document.querySelectorAll('.section');
       const total = jump[index].offsetTop - 76;
       document.body.scrollTop = total;
       document.documentElement.scrollTop = total;
   },
   dataScroll() {
       this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       if (this.scrollTop && this.scrollTop > 260) {
           this.fixedMenu = true;
       } else {
           this.fixedMenu = false;
       }
       this.isFixed = this.scrollTop > 258;
   },
   loadScroll() {
       const sections = document.querySelectorAll('.section');
       sections.forEach((item, index) => {
           if (this.scrollTop >= item.offsetTop - 200) {
               this.menuClickIndex = index;
           }
       });
   }
27 },
 mounted() {
    window.addEventListener('scroll', this.dataScroll);
 },
31  watch: {
   scrollTop() {
      this.loadScroll();
   }
35  },
36  destroyed() {
    window.removeEventListener('scroll', this.dataScroll, false);
38  }