vue--简单的侧边导航和页面中的内容联动_pc 滚动联动侧边导航

------简单展示
pc端有个侧边导航和页面内容联动需求,看图片:
随着鼠标在页面中滚动，根据页面滚动高度，相对应的导航内容高亮

下面看代码

-------HTML部分

<template>
<div class="app" >
  <!-- 导航 -->
  <div class="nav" id="box_action_translateYOut">
    <div  class="nav_box" v-for="(item,index) in product" :class="{'navActive':currentIndex === index}" >
      <div></div>
      <a :href="'#'+item">{
   {
   item}}</a>
    </div>
  </div>
  <div id="导航一" class="one" ref="scrollOne">
    内容一
  </div>
  <div id="导航二" class="two" ref="scrollTwo">
    内容二
  </div>
  <div id="导航三"  class="three" ref="scrollThree">
    内容三
  </div>
  <div id="导航四" class="four" ref="scrollFour">
    内容四
  </div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

----CSS部分

<style lang="less" scoped