JQuery监听页面滚动事件及scrollTop()，offset().top总结

Posted 2023-04-28

参考技术A

语法： $(element). scrollTop() /$(element). scrollTop(val) ;
eg： 当匹配元素为当前页面，那么当前滚动条到整个页面顶端的距离：
var winPos =$(window). scrollTop ();

$(element). offset().top ; $(element). offset().left ;

$( window ). scroll (function(event)
);

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");
        }
     })
});