<html>
<div class="demo1">
<div class="container">
<div class="navUl">
<div class="navLi" v-for="(item,index) in navList" :class="{'active':num===index}" :key="index" @click="navClick(index)">{{item.navName}}</div>
</div>
<div class="contScroll">
<div id="div0">技术百科</div>
<div id="div1">传播趋势</div>
<div id="div2">网民态度</div>
<div id="div3">国家政策</div>
<div id="div4">行业之声</div>
<div id="div5">突出问题</div>
</div>
</div>
</div>
</html><script>
export default {
data(){
return{
navList:[
{navName:'技术百科',navIcon:'icon'},
{navName:'传播趋势',navIcon:'icon'},
{navName:'网民态度',navIcon:'icon'},
{navName:'国家政策',navIcon:'icon'},
{navName:'行业之声',navIcon:'icon'},
{navName:'突出问题',navIcon:'icon'},
],
num:0,
}
},
mounted() {
document.addEventListener('scroll', this.handleScroll, true)
},
methods:{
handleScroll(e){
let scrollTop = e.target.scrollTop || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
let num=this.navList.length
for (let n = 0; n < num; n++) {
if(document.querySelector("#div"+n).offsetTop<scrollTop+40){
this.num=n
}
}
},
navClick(index){
this.num=index
let navPage = document.querySelector("#div" + index);
document.documentElement.scrollTop=navPage-20 //兼容大部分浏览器
//window.scrollTo({ //不兼容ie
// 'top':navPage.offsetTop - 20,
// })
}
}
}
</script>
<style scoped lang="scss">
.demo1{
padding:20px;
.container{
width: 100%;
.navUl{
width:120px;
position: fixed;
top:20px;
background: #ebebeb;
.navLi{
width: 100%;
line-height: 35px;
text-align: center;
border-bottom: 1px solid #fff;
cursor: pointer;
&:hover{
background: #FC9103;
color: #fff;
opacity: 0.8;
}
}
.navLi.active{
background: #FC9103;
color: #fff;
}
}
.contScroll{
width: calc(100% - 122px);
margin-left: 122px;
div{
width: 100%;
}
#div0{height: 700px;background: #FC9103;}
#div1{height: 900px;background: blueviolet;}
#div2{height: 1300px;background: #2894f8;}
#div3{height: 1200px;background: orangered;}
#div4{height: 1000px;background: green;}
#div5{height: 800px;background: red;}
}
}
}
</style>