导航随页面滚动

源码： 

<template>
  <div class="container">
    <div class="container-block">
      <div class="container-box contentBox1">一楼</div>
      <div class="container-box contentBox2">二楼</div>
      <div class="container-box contentBox3">三楼</div>
      <div class="container-box contentBox4">四楼</div>
      <div class="container-box contentBox5">五楼</div>
      <div class="container-box contentBox6">六楼</div>
    </div>
    <ul>
      <li :class="!item.select || 'li-select'" v-for="(item, index) in storey" :key="index">{{item.name}}</li>
      <li @click="BackToTop">顶部</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      storey: [
        {
          name: '一楼',
          select: true
        },
        {
          name: '二楼',
          select: false
        },
        {
          name: '三楼',
          select: false
        },
        {
          name: '四楼',
          select: false
        },
        {
          name: '五楼',
          select: false
        },
        {
          name: '六楼',
          select: false
        }
      ]
    }
  },
  mounted() {
    // 获取页面滚动的高度
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    BackToTop () {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    handleScroll(e) {
      let top = e.srcElement.scrollingElement.scrollTop / 350;    // 获取页面滚动高度
      top = parseInt(top)
      this.storey.forEach(element => {
        if (this.storey[top].name === element.name) {
          element.select = true
        } else {
          element.select = false
        }
      });
    }
  }
}
</script>
<style>
  .container-box {
    height: 500px;
    width: 80%;
  }
  .contentBox1 {
    background-color:antiquewhite;
  }
  .contentBox2 {
    background-color:aqua ;
  }
  .contentBox3 {
    background-color:aquamarine;
  }
  .contentBox4 {
    background-color:chartreuse;
  }
  .contentBox5 {
    background-color:brown;
  }
  .contentBox6 {
    background-color:cadetblue;
  }
  ul {
    width: 20%;
    min-width: 100px;
    position: fixed;
    right: 0;
    top: 30%;
  }
  ul li {
    border: 1px solid #000;
    height: 50px;
  }
  ul .li-select {
    color: #f00;
  }
</style>

效果图：