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

      

  • 相关阅读:
    麦肯锡 问题分析与解决技巧
    JavaSe_IO流总结
    tcpdump
    interface
    phpexcel 合并单元格后的动态行高
    分布式事务锁的实现
    IntelliJ IDEA 实用快捷键
    Redis安装教程
    ng new my-app创建angular项目是卡住的解决办法
    SqlYog无法连接mysql数据库(包括docker环境)的解决方法
  • 原文地址:https://www.cnblogs.com/bber/p/9656540.html
Copyright © 2011-2022 走看看