Question

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

Answer 1

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

使用stop（）

停止动画

$('#header').stop().animate(...);

或检测它是否是动画。

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

Answer 2

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

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

2 个答案: