Question

我目前正在重新设计我的Wordpress主题，并希望实现一个固定的导航栏。我设法通过添加位置来实现它：固定到标题区域。

由于首先菜单很大，我想在向下滚动时将其缩小，即当用户访问网站时，菜单的高度为75px，向下滚动时则降低到40左右。 50像素。

快速草图：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;
        }

    }

});

这是DEMO

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

How to create a resizing menu bar



Animated Resizing Header On Scroll

向下滚动时调整菜单大小

2 个答案:

这是DEMO