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

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

类似于您在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