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

Question

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

发布于
2016-01-13

上代码

<!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。先谢过！

javascript html css

阅读 7.5k

1 个回答

得票最新

itlr

1.2k116

发布于
2016-01-30

你要的不是scroll，而是