好资源导航 » 文章资讯 » vue使用原生js实现滚动页面跟踪导航高亮的示例代码

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

2023-09-06 16:11:04 65

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

监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。

我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。

html结构

main.vue

navigation.vue

javascript

exportdefault{
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(){
window.addEventListener('scroll',function(){
//封装类名函数集：判断、移除、增加、获取（简单粗暴版）；
functionremoveClass(obj,cls){
if(obj.className==cls){
obj.className="";
}
}
functionaddClass(obj,cls){
if(obj.className!=cls){
obj.className=cls;
}
}

letpos=document.documentElement.scrollTop;
if(pos>300){
document.querySelector('.nav-container').style.display='block';
}else{
document.querySelector('.nav-container').style.display='none';
}
varmenus=document.getElementById("js-nav").getElementsByTagName("li");
varitems=document.getElementById("js-content").querySelectorAll(".item");
varcurrentId="";

for(vari=0;i_itemTop-200){
currentId=_item.id;
}else{
break;
}
}
if(currentId){
for(varj=0;j
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐