业务需求:
由于页面导航栏是在页面中而非顶部固定的,所以需要在页面滚动到遮挡住导航栏的时候,在固定位置显示导航栏,我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等,都是类似的需求
问题:
定义有滚动条的div区域是box
box.addEventListener('scroll', function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
console.log(scrollTop)
});
结果一直输出的是0,而且并不是一直监听,只输出几次;
解决:
改为①e.target.scrollTop获取div滚动位置;②addEventListener第三个参数设置成true,事件捕获,就可以实时获取div的滚动位置了
box.addEventListener('scroll', function(e){
var scrollTop = e.target.scrollTop;
console.log(scrollTop)
},true);