jQuery：向下滑動導航欄 - 如何提高動畫平滑度？

Question

我創建如果用戶向下滾動過去的主頭僅顯示一個非常簡單的滑動向下導航欄：http://hammr.co/9525666/23/index.html

然而，動畫是驚人的和不光滑的。我懷疑這是因爲它在滾動時一直被調用，但我不確定如何只調用一次。

我的代碼如下所示：

function setOffset() { 
    bannerH = $('header').height(); 
} 

function navTop() { 
    if($(window).scrollTop() > bannerH) { 
     $('#navbar').stop().animate({ 
      top: 0 
     }, 100); 
    } else { 
     $('#navbar').stop().animate({ 
      top: -61 
     }, 100); 
    } 
} 

setOffset(); 

$(window).scroll(function(){ 
    navTop(); 
}); 

如果我刪除.stop()有動畫中大的延遲（我假設等待足夠的時間來「動畫」酒吧一路滾動的點，或者它似乎是這樣）。

無論如何，我的問題很簡單 - 如何調整這個動畫是光滑的？

Answer 1

你可以使用緩存的元素，並通過去抖了一點嘗試：

(function() { //closure to avoid any global variables 
    var timeoutScroll, 
     $navbar = $('#navbar'), 
     $window = $(window); 

    function setOffset() { 
     bannerH = $('header').height(); 
    } 

    function navTop() { 
     if ($window.scrollTop() > bannerH) { 
      $navbar.stop().animate({ 
       top: 0 
      }, 100); 
     } else { 
      $navbar.stop().animate({ 
       top: -61 
      }, 100); 
     } 
    } 

    setOffset(); 

    $window.scroll(function() { 
     clearTimeout(timeoutScroll); 
     timeoutScroll = setTimeout(navTop, 35); 
    }); 
})(); 

Answer 2

肯定，而不是讓頭刪除或隱藏在每一個滾動事件，你應該得到窗口的頂部和條的狀態的位置，並在必要時只改變他們：

function navTop() { 

    var navTopShowing = $('#navbar').css('top') == 0; 
    var windowTop = $(window).scrollTop(); 

    // If the top of the window is past the banner, and the banner is not showing, show it 
    if ((windowTop > bannerH) && (!navTopShowing)) 
    { 
     $('#navbar').stop().animate({ 
      top: 0 
     }, 100); 
    } 

    // Hide it if it is showing 
    if ((windowTop <= bannerH) && (navTopShowing)) 
    { 
     $('#navbar').stop().animate({ 
      top: -61 
     }, 100); 
    } 
} 

沒有測試，但希望它給你一個想法。

Answer 3

我也相信這是相當順利的。 （至少在我的電腦裏）

CSS3動畫應該會更快（但我真的不知道你會發現多少你會發現它）。你可以嘗試看看像CSS with jQuery callbacks這樣的東西。

或jquery.animate-enhanced plugin。