jQuery 向下滚动时如何缩小导航菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6713324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to shrink navigation menu when scrolling down?
提问by JordanBelf
For a new site I am developing I would love to shrink the navigation menu when the user scrolls down.
对于我正在开发的新网站，我希望在用户向下滚动时缩小导航菜单。
Something similar to what you can see at the IBM site: http://www.ibm.com/us/en/
类似于您在 IBM 站点上看到的内容：http: //www.ibm.com/us/en/
I couldn't find any jQuery implementation or tutorial around (I am sure I must be searching the wrong keywords)
我找不到任何 jQuery 实现或教程（我确定我一定是在搜索错误的关键字）
So if someone can point me in the right direction it will make me really happy.
所以如果有人能指出我正确的方向，那会让我真的很高兴。
Thanks in advance!
提前致谢！
回答by AlienWebguy
Here you go man:
来人了：
$(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);
}
});
});
回答by mrtsherman
What you do is check the scroll value of the window. If it is greater than zero then the user has scrolled down. If so then hide the banner (or shrink or whatever). If they go back to the top then reshow it.
您要做的是检查窗口的滚动值。如果它大于零，则用户已向下滚动。如果是这样，则隐藏横幅（或缩小或其他）。如果他们回到顶部，然后重新显示它。
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 0) {
$(".banner").slideUp();
}
else {
$(".banner").slideDown();
}
});
});
回答by Justin
This shrinks and grows the navigation bar as the user scrolls. Created this off of http://www.kriesi.at/themes/enfold/navigation bar. The version i created works nearly the same. https://github.com/Jlshulman/Elastic-Bar
这会随着用户滚动而缩小和增长导航栏。创建此关闭http://www.kriesi.at/themes/enfold/导航栏。我创建的版本几乎相同。https://github.com/Jlsulman/Elastic-Bar
