向下滚动时调整菜单大小

我目前正在重新设置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;
        }

    }

});

这是演示

此外, 你可能想查看这些教程, 而不是自己发明轮子：

如何创建大小调整菜单栏滚动时的动画大小调整标题