如何在窗口滾動上動畫導航欄

Question

我想問一下，是否有方法使用jQuery animate（）方法爲窗口滾動上的水平導航欄的頂級屬性設置動畫效果。

下面是代碼我使用：

window.addEventListener("scroll", function() { 
if (window.scrollY > 200) { 
    $('#navbar').css({top:"100px"}); 
} 
else { 
    $('#navbar').css({top:"0px"}); 
} 
},false); 

CSS：

#navbar{ 
top:0; 
position:fixed; 
transition: top 0.5s; 
} 

當向下滾動200像素導航欄改變其頂部位置，從0到100像素; 這工作得很好，但如果我改變方法，並把.animate代替的CSS的，

$('#navbar').animate({top:"100px"});  

它停止工作。任何想法爲什麼？

Answer 1

您可以用CSS transition做到這一點，你可以如何實現這一目標是使用jQuery addClass代替css()

DEMO

$(window).on('scroll', function() { 
    if ($(this).scrollTop() > 200) { 
     if (!$('.navbar').hasClass('expand')) { 
      $('.navbar').addClass('expand'); 
     } 
    } else { 
     if ($('.navbar').hasClass('expand')) { 
      $('.navbar').removeClass('expand'); 
     } 
    } 
}); 


.navbar { 
    top: 0; 
    position: fixed; 
    transition: top 0.5s; 
} 

.navbar.expand { 
    top: 100px; 
} 

Answer 2

每當您在每個像素上滾動頁面時都會執行滾動事件偵聽器，並且動畫從開始處開始。這給了意想不到的結果

http://jsfiddle.net/29tkxawy/

你應該保留原樣（與.css()）。

或者這樣沒有CSS轉換：

http://jsfiddle.net/29tkxawy/10/