如何縮小導航菜單時向下滾動？

Question

對於我正在開發的新網站，我希望在用戶滾動時縮小導航菜單。類似於您可以在IBM網站上看到

東西：http://www.ibm.com/us/en/

我找不到任何jQuery的實現或教程左右（我相信我一定要尋找的錯誤的關鍵詞）

所以，如果有人可以將我指向正確的方向，這會讓我真的很開心。

在此先感謝！

Answer 1

在這裏你去人：

$(function(){ 
    var navStatesInPixelHeight = [40,100]; 

    var changeNavState = function(nav, newStateIndex) { 
    nav.data('state', newStateIndex).stop().animate({ 
     height : navStatesInPixelHeight[newStateIndex] + 'px' 
    }, 600);  
    }; 

    var boolToStateIndex = function(bool) { 
    return bool * 1;  
    }; 

    var maybeChangeNavState = function(nav, condState) { 
    var navState = nav.data('state'); 
    if (navState === condState) { 
     changeNavState(nav, boolToStateIndex(!navState)); 
    } 
    }; 

    $('#header_nav').data('state', 1); 

    $(window).scroll(function(){ 
    var $nav = $('#header_nav'); 

    if ($(document).scrollTop() > 0) { 
     maybeChangeNavState($nav, 1); 
    } else { 
     maybeChangeNavState($nav, 0); 
    } 
    }); 
}); 

演示：http://jsfiddle.net/seancannon/npdqa9ua/

Answer 2

你要做的是檢查窗口的滾動值。如果它大於零，那麼用戶已經向下滾動。如果是這樣，然後隱藏橫幅（或收縮或任何）。如果他們回到頂端然後重新顯示它。

http://jsfiddle.net/rxXkE/

$(window).scroll(function() { 
console.log($(window).scrollTop()); 
if ($(window).scrollTop() > 0) { 
    $(".banner").slideUp(); 
} 
else { 
    $(".banner").slideDown(); 
} 

}）;

Answer 3

這種收縮和增長的導航欄當用戶滾動。創建此關閉http://www.kriesi.at/themes/enfold/導航欄。我創建的版本幾乎相同。 https://github.com/Jlshulman/Elastic-Bar