jquery – 滚动时如何缩小导航菜单？

对于正在开发的新网站,当用户向下滚动时,我希望缩小导航菜单.

类似于您可以在IBM站点看到的内容：http://www.ibm.com/us/en/

我找不到任何jQuery实现或教程(我确定我必须搜索错误的关键字)

所以如果有人能指出我正确的方向,那会让我真的很开心.

提前致谢！

解决方法

这里你去男人：

$(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/