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

时间:2014-10-02 00:13:03

标签: javascript jquery html css

我制作了一个自动隐藏的导航栏,它在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>

2 个答案:

答案 0 :(得分:0)

Onscroll发射了很多次,所以你要告诉它动画很多次。

使用stop()

停止动画
$('#header').stop().animate(...);

或检测它是否是动画。

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

答案 1 :(得分:0)

我认为应该尽量不使用动画,滚动会多次捕捉动作,所以用.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:

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