如何缩小导航菜单向下滚动? [英] How to shrink navigation menu when scrolling down?
本文介绍了如何缩小导航菜单向下滚动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
对于正在开发的新网站,我希望在用户向下滚动时缩小导航菜单。
For a new site I am developing I would love to shrink the navigation menu when the user scrolls down.
与您在IBM网站上看到的类似: http://www.ibm.com/us/en/
Something similar to what you can see at the IBM site: http://www.ibm.com/us/en/
我找不到任何jQuery实现或教程(我相信我必须搜索错误的关键字)
I couldn't find any jQuery implementation or tutorial around (I am sure I must be searching the wrong keywords)
所以如果有人可以指向我
So if someone can point me in the right direction it will make me really happy.
提前感谢!
推荐答案
这里你去男人:
$(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/
这篇关于如何缩小导航菜单向下滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文