Javascript 自动隐藏在IE中工作的导航栏

我制作了一个自动隐藏的导航栏，它在chrome上工作得很好，但IE11却被吓坏了。这个想法是，当你向下滚动时，它会隐藏，但如果你向上滚动，它会重新出现。在IE11中，我向下滚动，它隐藏了导航栏。然后，当我卷回时，一秒钟都没有发生任何事情。。。然后导航条连续快速出现和消失3次。。。几秒钟后，它又这样做了。知道怎么了吗

<script>
var lastScrollTop = 0;


$(window).scroll(function(){

   var st = $(this).scrollTop();
   if (st > lastScrollTop){
      $('#header').animate({ marginTop: '-70px', opacity: 0 }, 200);    
   } else {
         $('#header').animate({ marginTop: '0px', opacity: 1 }, 200);   
   }
   lastScrollTop = st;
});
</script>

var lastScrollTop=0；
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
如果（st>lastScrollTop）{
$（'#header'）。动画（{marginTop:'-70px'，不透明度：0}，200）；
}否则{
$（'#header'）。动画（{marginTop:'0px'，不透明度：1}，200）；
}
lastScrollTop=st；
});

Onscroll会触发很多次，因此您要告诉它设置很多次的动画

使用stop（）停止动画

或者检测它是否正在设置动画

$('#header').not(":animated").animate(...);

---

我认为应该尽量不要使用动画，滚动会捕捉多次动作，所以用.css替换

Javascript:

$(function(){

    var start = 0;
    var end;
    $(window).scroll(function(){
        end = $(this).scrollTop();
       if (end > start){
          $('#header').css({marginTop: '-70px', opacity: 0 });    
       } else {
             $('#header').css({ marginTop: '0px', opacity: 1 });   
       }
       start = end;
    });

});

CSS:

---

谢谢你的建议，但是当我尝试这个并在IE中向下滚动时，导航栏消失了，然后又回来了，它可以在我的IE 9和10浏览器中找到。如果你需要更多的信息，你可以阅读这篇文章。我尝试了两种选择，但都不适合我。谢谢你的建议

$(function(){

    var start = 0;
    var end;
    $(window).scroll(function(){
        end = $(this).scrollTop();
       if (end > start){
          $('#header').css({marginTop: '-70px', opacity: 0 });    
       } else {
             $('#header').css({ marginTop: '0px', opacity: 1 });   
       }
       start = end;
    });

});

body{margin:0;height:2000px;}
#header{width:100%;position:fixed;height:70px;line-height:70px;background:red;top:0;left:0;}