向下滚动时如何缩小导航菜单？答案

【问题标题】：How to shrink navigation menu when scrolling down?向下滚动时如何缩小导航菜单？
【发布时间】：2011-10-06 11:59:20
【问题描述】：

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

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

我找不到任何 jQuery 实现或教程（我确定我一定是搜索了错误的关键字）

所以，如果有人能指出我正确的方向，那我会非常高兴。

提前致谢！

【问题讨论】：

标签： jquery css menu scroll shrink

【解决方案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/

【讨论】：

亲爱的匿名投票者：想解释一下吗？这有什么用处？
@Aaroniker 如果您仍在寻找 Firefox 的解决方案，看起来使用 $(document).scrolltop() 适用于 chrome/firefox/ie11

【解决方案2】：

当用户滚动时，导航栏会缩小和扩大。从http://www.kriesi.at/themes/enfold/ 导航栏创建了这个。我创建的版本几乎相同。 https://github.com/Jlshulman/Elastic-Bar

【讨论】：

【解决方案3】：

您所做的是检查窗口的滚动值。如果它大于零，则用户向下滚动。如果是这样，那么隐藏横幅（或缩小或其他）。如果他们回到顶部然后重新显示它。

http://jsfiddle.net/rxXkE/

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

});

【讨论】：

-1 这不模仿 OP 的例子。这完全隐藏了导航，这是毫无意义的，因为您可以在不做任何动画的情况下滚动，并且导航会隐藏在屏幕之外。
@AlienWebguy 这只是一个例子，见文字If so then hide the banner (or shrink or whatever)。
说真的为什么这会得到支持？跟$(window).unload(function(){$(this).close();}一样没意义
他还说了一些类似于您在 IBM 网站上看到的内容：ibm.com/us/en
@alienwebguy - 哇，你把上滑/下滑换成了动画尺寸。抱歉，我以为提问者没有脑死亡。