vue使用原生js实现滚动页面跟踪和导航高亮

需要使用vue做一个特殊的页面。滚动页面以指定区域导航突出显示。监听滚动页面事件，比较当前页面的位置和元素的位置，如果当前滚动区域的位置大于元素的位置，则给导航添加一个class，移除class进行切换样式。我使用的方法是给定位元素加一个id，给导航加一个data-id属性，监听滚动事件。如果当前滚动区域大于定位元素的区域，则将元素的id赋值给一个变量，然后与navigation、switch类的data-id进行匹配。html结构main.vuenavigation.vuejavascriptexportdefault{name:"导航",data(){return{navList:[{name:"QuizHall",id:"quizhall"},{name:"QuizRecord",id:"quizrecord"},{name:"历史竞赛",id:"quizHistory"},{name:"Myquiz",id:"quizMine"},{name:"Leaderboard",id:"quizRa??nk"},{name:"Howtoplay",id:"quizRule"}],curindex:0};},mounted(){this.initScroll();},方法：{initScroll(){let_this=this;//监听页面滚动事件window.addEventListener('scroll',function(){varrremoveClass=function(obj,cls){if(obj.className==cls){obj.类名="";}}varaddClass=function(obj,cls){if(obj.className!=cls){obj.类名=cls；}}让pos=document.documentElement.scrollTop;如果（pos>300）{_this.isVisibleNav=true;}else{_this.isVisibleNav=false;}//获取所有导航dom和元素domvarnavList=document.querySelector("#js-nav").querySelectorAll("li");varitems=document.querySelector("#js-content").querySelectorAll(".item");//滚动后遍历元素，如果页面的滚动位置大于元素的位置，则赋值给变量varcurrentId="";对于(vari=0;i_itemTop-200){currentId=_item.id;}else{休息;}}//如果变量已经赋值，继续行匹配，如果匹配添加类，否则删除if(currentId){for(varj=0;j