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