网页向下滑动时导航栏消失,向上滑动时出现,在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。先谢过!

阅读 4.5k
评论
    1 个回答
    • 1.2k
      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章