css - 向下滚动时调整菜单大小

Question

我目前正在重新设计我的 Wordpress 主题，并希望实现一个固定的导航栏。我设法通过将 position:fixed 添加到标题区域来实现这一点。

由于菜单本来就很大，所以我想在向下滚动时将其缩小，即当用户访问网站时，菜单的高度为 75px，向下滚动时它会减小到 40-50px 左右。

速写：http: //i.imgur.com/iICQkfF.png

关于如何实现这一点的任何建议？

干杯，菲利普

Answer 1

既然你问的是 WordPress，我猜你可以使用 jQuery。
您只需要监听$(window).scroll()事件并根据用户滚动的程度调整菜单大小（您可以通过 获得$(window).scrollTop()）。快速演示：

http://jsfiddle.net/FMypW/1/

（这不是一个实际的菜单，只是显示功能工作）

Answer 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;
        }

    }

});

这是演示

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

• 如何创建调整大小的菜单栏

• 滚动上的动画调整标题