对于我正在开发的新网站,我希望在用户向下滚动时缩小导航菜单。
类似于您在 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);
}
});
});
Demo: http://jsfiddle.net/seancannon/npdqa9ua/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)