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

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于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");             }           }         }       })     }   } };
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

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

发表评论

提供最优质的资源集合

立即查看 了解详情