监听页面滚动的方法
一、原生js通过window.onscroll监听
window.onscroll = function() {
//为了保证兼容性,这里取两个值,哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
}
2,设置滚动动画
window.onscroll = function () {
console.log(document.documentElement.scrollTop);
var scrollTop = document.documentElement.scrollTop;
/*1.默认的透明度*/
var opacity = 0;
if (scrollTop < height) {
/*2.当页面滚动的时候---随着页面卷曲的高度变大透明度变大*/
opacity = "0";
} else {
/*3.当页面滚动的时候---超过某一个高度的时候透明度不变*/
opacity = "1";
}
//设置显示样式
this.$refs.backTop.style.opacity =opacity ;
}