滚动页面 菜单跟着变动
<template>
<div class="navbox mt30 mr30" ref="nav">
<a href="JavaScript:void(0)" class="flex row-center" v-for="(item,i) in navlist" :key="i" @click="clickNav(i)" :class="{cur:i==current}">
<div>{{item.navIcon}}</div>
<span>{{item.navName}}</span>
</a>
</div>
</template>
<script>
export default {
name: 'LeftNav',
components: {
},
data(){
return {
current:0,
navlist:[
{navName:'技术百科',navIcon:'icon'},
{navName:'传播趋势',navIcon:'icon'},
{navName:'网民态度',navIcon:'icon'},
{navName:'国家政策',navIcon:'icon'},
{navName:'行业之声',navIcon:'icon'},
{navName:'突出问题',navIcon:'icon'},
],
scrollY:0,
heightList:[]
}
},
methods:{
clickNav(index){
// this.current=index;
var navPage = document.querySelector(".nav" + index);
const wrap = this.sysWrap.wrap;
wrap.scrollTop = navPage.offsetTop;
window.scrollTo({
'top':navPage.offsetTop,
'behavior':'smooth'
})
},
handleScroll(){
const top = this.sysWrap.wrap.scrollTop;
this.getCurrentIndex(top);
},
getCurrentIndex(top) {
let index = 0;
for(let i=0,len=this.heightList.length;i<len;i++){
if(top >= this.heightList[i] && top < this.heightList[i+1]){
index = i;
};
};
this.current = index;
}
},
mounted(){
for(var i = 0 ;i<this.navlist.length;i++){
let divgao = document.querySelector(".nav" + i).offsetTop;
this.heightList.push(divgao);
};
window.addEventListener('scroll',this.handleScroll,true)
// window.addEventListener('scroll',debounce(this.handleScroll,500),true) //防抖方法 debounce() ,先在项目根目录安装防抖插件，然后引入
}
}
</script>
<style scoped lang="less">
@cur-color:#1890FF;
@color:#000000;
.navbox{
width:86px;
font-size:14px;
position: fixed;
top: 120px;
a{
width:100%;
height:86px;
color:fade(@color,85%);
background-color:fade(@color,3%);
margin-bottom:2px;
&.cur{
color:@cur-color;
background-color: fade(@cur-color,5%);
}
&:hover{
color:@cur-color;
background-color: fade(@cur-color,5%);
}
}
}
</style>
https://mp.csdn.net/console/editor/html/109206426
