<template>
<div>
<div class="div">
<ul class="navgator">
<li class="navgatorLi" :class="{'isActive': index===navgatorIndex}" @click="handleLeft(index)" v-for="(item,index) in navgator" :key="item">{{item}}</li>
</ul>
<ul class="rightList">
<li :id="'id'+index" v-for="(item,index) in listBox" :key="item">{{item}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
navgator: [
'列表A',
'列表B',
'列表C',
'列表D',
],
navgatorIndex: 0,
listBox: [
'A','B','C','D'
],
listBoxState: true,//点击导航栏时，暂时停止监听页面滚动
};
},
created() {
},
mounted() {
let timeId;
window.addEventListener('scroll', () => {
// 页面滚动停止100毫秒后才会执行下面的函数。
clearTimeout(timeId);
timeId = setTimeout(() => {
this.scrollToTop();
console.log('执行完成');
}, 100);
} , true);
},
methods: {
// 点击导航菜单，页面滚动到指定位置
handleLeft(index) {
this.navgatorIndex = index;
this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
this.listBoxState=false;
let timeId;
clearTimeout(timeId);
timeId = setTimeout(() => {
this.listBoxState=true;
},200);
},
// 监听页面元素滚动，改变导航栏选中
scrollToTop() {
// 获取视窗高度
var domHight = document.body.offsetHeight;
console.log(domHight)
// dom滚动位置
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (this.listBoxState) {//作用是点击导航栏时，延迟这里执行。
this.listBox.map((v,i) => {
// 获取监听元素距离视窗顶部距离
// var offsetTop = (`id${i}`).offsetTop;
// 获取监听元素本身高度
var scrollHeight = document.getElementById(`id${i}`).scrollHeight;
// 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
// 则表示页面已经滚动到可视区了。
if (scrollTop >= offsetTop && scrollTop<=(offsetTop+scrollHeight)) {
// 导航栏背景色选中
this.navgatorIndex = i;
}
})
}
},
},
}
</script>
<style scoped>
.div {
width: 100%;
background: #ededed;
}
.navgator {
width: 200px;
position: fixed;
top: 0;
}
.navgator .navgatorLi {
width: 100%;
height: 1rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
border-top: none;
}
.navgator .isActive {
color: #fff;
background: darkseagreen;
}
.rightList {
width: 560px;
margin-left : 200px;
}
.rightList li {
width: 100%;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
</style>