jquery监听滚动事件获取scrollTop
Posted bber
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery监听滚动事件获取scrollTop相关的知识，希望对你有一定的参考价值。
css：
.anchor_reached {
color: #0073eb;
}
jquery：
$(window).scroll(function(event){
$(".anchor_directory").siblings().each(function(){
var this_top = $(this).attr("data-top");
if(($(‘body‘).scrollTop()) >= this_top){
$(this).addClass("anchor_reached").siblings().removeClass("anchor_reached");
}
}）
})
/*************2018.9.16更新***************/
今天测试的时候发现有bug，scrollTop获取到居然总是为0，我以前用了个假浏览器？？
正题，无论火狐还是谷歌，console的结果都是0，chrome对document.documentElement.scrollHeight&document.documentElement.scrollTop是不能识别的，而firefox和IE11不能识别document.body.scrollHeight&document.body.scrollTop，所以要考虑的网页的兼容性，建议两种获取方法都要写在代码里。
修正后的代码如下：
//监听屏幕滚动条
$(window).scroll(function(event){
var oTop = document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;
//console.log(oTop)
$(".anchor_directory").siblings().each(function(){
var this_top = $(this).attr("data-top");
//console.log($(‘body‘).scrollTop()) //---0
if((oTop + 140) >= this_top){
$(this).addClass("anchor_reached").siblings().removeClass("anchor_reached");
}
})
});
以上是关于jquery监听滚动事件获取scrollTop的主要内容，如果未能解决你的问题，请参考以下文章