项目需求
因为本人是一个强迫症的完美主义者，再一次项目中无意中发现了一个特别炫酷的效果，如图：
GIF.gif
在滚动网页的时候右边的目录随着左边的描点提示，接下来咱们一起来看看这个效果的细节。
设计思想
如果想实现这个效果，首先咱们应该思考一下，这个效果需要什么？
第一：首先必须知道页面中每个标题到页面顶部的位置。（element.offsetTop）
第二：必须知道当前滚动条到页面顶部的位置。(window.scrollY)
代码注释
methods: {
//所有方法
onscroll(Event) {
//滚动事件
let ws = window.scrollY; //当前滚动条位置
if (ws > 160) {
//控制悬浮
this.float = true;
} else {
this.float = false;
}
/**当前滚动条的位置大于160则悬浮，小于等于160取消悬浮 */
this.itemTab.forEach((item, index) => {//循环检测每个标题的位置
if (ws>item-50) {//判断当前滚动条大于
this.active = index;//将最后一个大于item的下标赋值给active
//active是当前滚动条对应的标题位置
}
});
console.log('active:'+this.active);
}
},
mounted() {
//当页面中所有元素加载完成触发
window.addEventListener("scroll", this.onscroll);
//为浏览器添加“scroll”滚动条滚动事件
for (let i = 0; i < this.list.length; i++) {
//循环获取的list中标题的位置
//补充：list中存放的是标题的id数组
let ele = document.getElementById(this.pre + i + this.rea);
this.itemTab.push(ele.offsetTop);
//获取位置后添加到itemTab数组
}
}
看效果
GIF1.gif
实现的很完美。
最后
如果大家有什么问题可以在评论区留言。
