对于正在开发的新网站,当用户向下滚动时,我希望缩小导航菜单.
类似于您可以在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);
}
});
});
