向下滚动时调整菜单大小

我目前正在重新设置Wordpress主题的风??格, 并希望实现一个固定的导航栏。我设法通过将position:fixed添加到标题区域来实现这一点。
由于菜单首先很大, 因此我想在向下滚动时将其缩小, 即当用户访问网站时, 菜单的高度为75像素, 而在向下滚动时则减小为40-50像素左右。
快速素描:http://i.imgur.com/iICQkfF.png
关于如何实施此建议?
【向下滚动时调整菜单大小】菲利普干杯
#1由于你询问的是WordPress, 我想你可以使用jQuery。
你只需要侦听$(window).scroll()事件并根据用户滚动了多少即可调整菜单大小(你可以通过$(window).scrollTop()获取)。快速演示:
http://jsfiddle.net/FMypW/1/
(这不是实际的菜单, 而只是显示功能的工作)
#2

var moved = false; $(window).scroll(function(){ if( $(this).scrollTop() < 2000 ){ $('.header').height(200 - (200 * $(this).scrollTop() / $('body').height())); if (!moved & & $('.header').height() < 170) { $('.header').animate({top:"-40px"}); moved = true; } else if (moved & & $('.header').height() > 170) { $('.header').animate({top:"0px"}); moved = false; }}});

这是演示此外, 你可能想查看这些教程, 而不是自己发明轮子:
如何创建大小调整菜单栏滚动时的动画大小调整标题

    推荐阅读