Question

昨天我得到了一些很棒的帮助，试图弄清楚如何创建一个调整大小的导航栏：jQuery slow response to scrollTop()然而，当我将它实现到WP主题时，它根本不能正常工作！向下滚动页面时容器div正确调整大小，但滚动回页面顶部没有任何反应。我在这里使用Zurb Foundation Framework，Reverie主题开发服务器：http://dev.bradmagnus.server287.com/

我非常迫切需要一些帮助！我花了很长时间试图让这个导航弄清楚。我真的很感谢你的帮助和stackoverflow上这个非常棒的社区！

这是完美运作的小提琴：http://jsfiddle.net/magnusbrad/pRgNc/8/

这是有问题的jQuery：

var top = !$(document).scrollTop();

$(window).scroll(function () {
    console.log($(document).scrollTop());
    if ($(document).scrollTop() === 0 && !top) {

        $('div#navigation.fixed').stop().animate({'height':'140px'}, 300);
        $('.title-area img').attr('src', 'http://lorempixel.com/output/fashion-q-g-198-67-10.jpg');

        $('ul.right').animate({'margin-top':'0'}, 300);

        top = true;

    } else if (top) {

        $('div#navigation.fixed').animate({'height':'40px'}, 300);
        $('.title-area img').attr('src', 'http://lorempixel.com/output/fashion-q-c-198-67-6.jpg');
        $('ul.right').animate({'margin-top':'-50px'}, 300);

        top = false;

    }
});

Answer 1

这是一个有趣的:)。这是问题所在：

通过使用$(window).scroll(function () {}功能，您可以在每次滚动时触发事件。因此，如果您向下滚动整个页面，您的事件将被触发约50次。看看this小提琴，我只是用警告替换了日志功能，使这个错误可见。

我对此并不是百分之百确定，但我猜它的原因是因为它不起作用：你为每个触发器设置了300ms的动画时间，这会将你动画的持续时间改为大约10-20秒触发多次。如果您停止滚动并等待，您是否看到网站上的导航会在一段时间后重新显示？

我建议您触发调整大小事件，这只会缩小您的菜单一次。触发的其他滚动事件可以跳过此事件，因为它只需要调整一次大小。然后，当用户完成滚动时，我只会检查用户是否在页面顶部。如果是，请将菜单大小更改回原始大小。所有这些都可以在this小提琴中找到。

为了让你完成动画，你只需要在你的jquery动作中设置更多的CSS。现在，你刚刚执行 $('div#navigation.fixed').stop().animate({'height':'140px'}, 300); 但要显示菜单，您还需要编辑<ul class="right">的CSS，否则它们不可见，因为包装器会缩小。

尝试一下，让我知道它是否有帮助。

div调整大小或js冲突？

1 个答案: