zoukankan      html  css  js  c++  java
  • 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");
            }
         })
    });
    

      

  • 相关阅读:
    Keras分类问题
    Keras预测股票
    Tensflow预测股票实例
    estimator = KerasClassifier
    keras CNN解读
    Windows下Python安装: requires numpy+mkl 和ImportError: cannot import name NUMPY_MKL
    Tensorflow RNN_LSTM实例
    同时安装python2.7和python3.5
    oracle 杀掉当前用户的进程
    IMP导入时的错误以及解决办法
  • 原文地址:https://www.cnblogs.com/bber/p/9656540.html
Copyright © 2011-2022 走看看