本篇文章给大家带来的内容是关于vue使用原生js实现滚动页面跟踪导航高亮，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
需要使用vue做一个专题页面。
滚动页面指定区域导航高亮。
监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。
html结构main.vue
<template>  <div class="qz-home">    <div class="quiz-container">      <div class="quiz-ad-pic" id="pagetop"></div>      <div class="quiz-main">        <div class="quiz-main-inside" id="js-content">          <quiz-sessions class="item" id="quizhall"></quiz-sessions>          <quizrecords class="item" id="quizrecord"></quizrecords>          <quiz-history class="item" id="quizhistory"></quiz-history>          <quiz-mine class="item" id="quizmine"></quiz-mine>          <quiz-rank class="item" id="quizrank"></quiz-rank>          <quiz-rule class="item" id="quizrule"></quiz-rule>        </div>      </div>      <navigation id="js-nav"></navigation>    </div>  </div></template>
navigation.vue
<template>  <nav class="nav-container">    <div class="nav-mark"></div>    <div class="nav-main">      <ul class="nav-list">        <li :class="{'cur': curindex === index}" v-for="(item, index) in navlist" :key="index" :data-id="item.id"><a @click="linkto(item.id, index)">{{item.name}}</a></li>      </ul>      <div class="backtop" @click="backtop()">        <a></a>      </div>    </div>  </nav></template>
javascript
export default {  name: navigation,  data() {    return {      navlist: [        { name: 竞猜大厅, id: quizhall },        { name: 竞猜记录, id: quizrecord },        { name: 历史赛事, id: quizhistory },        { name: 我的竞猜, id: quizmine },        { name: 排行榜, id: quizrank },        { name: 玩法, id: quizrule }      ],      curindex: 0    };  },  mounted() {    this.initscroll();  },  methods: {    initscroll() {      let _this = this;      // 监听页面滚动事件      window.addeventlistener('scroll', function() {        var removeclass = function(obj, cls) {          if (obj.classname == cls) {            obj.classname = ;          }        }        var addclass = function(obj, cls) {          if (obj.classname != cls) {            obj.classname = cls;          }        }        let pos = document.documentelement.scrolltop;        if (pos > 300) {          _this.isvisiblenav = true;        } else {          _this.isvisiblenav = false;        }        // 获取全部导航dom与元素dom        var navlist = document.queryselector(#js-nav).queryselectorall(li);        var items = document.queryselector(#js-content).queryselectorall(.item);        // 滚动后遍历元素，如果页面滚动位置大于元素的位置，赋值给变量        var currentid = ;        for (var i = 0; i < items.length; i++) { var _item = items[i]; var _itemtop = _item.offsettop; if (pos > _itemtop - 200) {            currentid = _item.id;          } else {            break;          }        }        // 如果已赋值了变量，进行匹配，如果匹配则添加class其他删除        if (currentid) {          for (var j = 0; j < navlist.length; j++) {            var _navitem = navlist[j];            var _navid = _navitem.getattribute('data-id');            if (_navid != currentid) {              removeclass(_navitem, cur);            } else {              addclass(_navitem, cur);            }          }        }      })    }  }};
以上就是vue使用原生js实现滚动页面跟踪导航高亮的详细内容。