本篇文章给大家带来的内容是关于vue使用原生js实现滚动页面跟踪导航高亮，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
需要使用vue做一个专题页面。
滚动页面指定区域导航高亮。
监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。
我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。
html结构
main.vue
立即学习“前端免费学习笔记（深入）”；
登录后复制
navigation.vue
登录后复制
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 _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实现滚动页面跟踪导航高亮的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2738069.html
