在IE中工作的自動隱藏導航欄

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發生了一堆事情，所以你要讓它動畫一堆。

要麼停止與停止（）動畫

$('#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;}