首页 > 网页向下滑动时导航栏消失,向上滑动时出现,在ie下表现不尽人意。

网页向下滑动时导航栏消失,向上滑动时出现,在ie下表现不尽人意。

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .header {
            position: fixed;
            width: 100%;
            height: 50px;
            background-color: red;
        }
        .content {
            width: 100%;
            height: 2000px;
            background-color: #ccc;
        }
        .hide {
            top: -50px;
        }
        .show {
            top: 0;
        }
    </style>
</head>
<body>
    <div class="header">321</div>
    <div class="content"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function(){
            var oTop1 = $(document).scrollTop(); 

            $(window).scroll(function(){
                var oTop2 = $(document).scrollTop(); 

                if(oTop2 > oTop1){
                    $(".header").addClass("hide").removeClass("show");
                }else {
                      $(".header").addClass("show").removeClass("hide");
                }
                oTop1 = $(document).scrollTop();
              });
        });
    </script>
</body>
</html>

如上所示,在ie下向下滑动时会增加class:hide 但是松开滑轮后就会移出并同时增加show。
在代码中打印数值后发现滚动一次滑轮ie浏览器会打印多次数值,而其他浏览器只打印一个数值,故认为是ie浏览器滑动事件会执行多次。问题发现但是无法解决,故希望大神们给个解决方案兼容到ie。先谢过!


你要的不是scroll,而是

  1. scrollstart - 记下当前位置

  2. scrollstop - 取出之前记下的位置,和当前位置作比较,并处理

https://github.com/ssorallen/jquery-scrollstop

【热门文章】
【热门文章】