jQuery在调整分区大小时发生冲突还是什么？
我昨天得到了一些很棒的帮助，试图弄清楚如何创建一个大小调整导航栏：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;
}
});回答 1
Stack Overflow用户
发布于 2013-10-22 17:37:11
这是一个相当有趣的问题:)。以下是问题所在：
通过使用$(window).scroll(function () {}函数，您可以在“每次”滚动时触发事件。因此，如果你向下滚动整个页面，你的事件会被触发大约50次。看一下this fiddle，我简单地用一个警报替换了日志函数，以使这个错误可见。
我不是100%确定这一点，但我猜这是因为它不工作的原因:你已经为每个触发器设置了300ms的动画时间，如果触发器被多次触发，你的动画持续时间将更改为大约10-20秒。你有没有看到，如果你停止滚动并等待一段时间后，网站上的导航就会重新出现？
我建议你只触发一次调整大小事件，它会缩小你的菜单。其他被触发的滚动事件可以跳过这个事件，因为它只需要调整一次大小。然后，当用户完成滚动时，我只会检查用户是否在页面顶部。如果是，请将菜单的大小更改回原始大小。所有这些你都可以在this fiddle中找到。
要完成动画，只需在jquery操作中设置更多css即可。现在，您只需执行$('div#navigation.fixed').stop().animate({'height':'140px'}, 300);，但要显示菜单，您还需要编辑<ul class="right">的css，否则它们将不可见，因为包装器会缩小。
试一试，让我知道它是否有帮助。
https://stackoverflow.com/questions/19496985
复制相似问题
腾讯云开发者
