0

昨天我得到了一些很棒的帮助，试图弄清楚如何创建一个调整大小的导航栏：jQuery 对 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;

    }
});
4

1 回答 1

0

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

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

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

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

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

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

于 2013-10-22T09:37:11.037 回答