个性化阅读
专注于IT技术分析

向下滚动时调整菜单大小

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

    }

});

这是演示

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

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

赞(0) 打赏
未经允许不得转载:srcmini » 向下滚动时调整菜单大小
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏