<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>