div 大小调整或其他方面的 jQuery 冲突？

Question

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

我非常需要帮助!我花了太长时间试图弄清楚这个导航。非常感谢您的帮助和这个很棒的 stackoverflow 社区!

这是完美运行的 fiddle :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 fiddle，我只是用警报替换了日志功能，以使此错误可见。

我不是 100% 确定这一点，但我猜这是因为它不起作用的原因:你为每个触发器设置了 300 毫秒的动画时间，这将把你的动画持续时间更改为大约 10-20 秒，如果它得到触发多次。如果您停止滚动并稍等片刻，您是否看到您网站上的导航会在一段时间后重新出现？

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

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

试一试，如果有帮助请告诉我。