首先,在mounted钩子中给window添加一个滚动监听事件,
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
然后在方法中,添加这个handleScroll方法,打印scrollTop在控制台中查看需要滚动的大小
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
},
![](https://img2020.cnblogs.com/blog/2228253/202101/2228253-20210120095235430-755916033.png)
添加内容,当滚动条滚动大于100时,top状态改为1
handleScroll() {
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
console.log(scrollTop);
if (scrollTop > 100) {
this.top = 1;
} else {
this.top = 0;
}
},
data return 中定义top初始值为0,
data() {
return {
top: 0,
};
},
需要显示的内容上添加: