vue使用原生js实现滚动页面跟踪导航高亮的示例代码-创新互联

需要使用vue做一个专题页面。滚动页面指定区域导航高亮。

克井网站建设公司创新互联公司,克井网站设计制作，有大型网站制作公司丰富经验。已为克井近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的克井做网站的公司定做！

监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加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>

网页名称：vue使用原生js实现滚动页面跟踪导航高亮的示例代码-创新互联
当前地址：https://www.cdcxhl.com/article14/dssgge.html

成都网站建设公司_创新互联，为您提供网站维护、网站设计公司、关键词优化、企业网站制作、网站内链、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联