Question

我的JQuery代码：

var divs = $('.headerlogo, .headertext');
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
    divs.stop().fadeOut("fast"); 
    $('.header').animate({height:'35px'}, 500);
    } 
else {
    divs.stop().fadeIn("fast");
    $('.header').animate({height:'350px'}, 500);
    }
});
});

请在此处找到我的完整代码：http://jsfiddle.net/jJyJv/

当您向下滚动标题“缩小”按预期时，但是当您按照我的预期向上滚动时不会返回。有时只有标题的一小部分回来，然后几秒钟后它会消失，或者有时候导航栏会丢失，并在几秒钟后回来。它应该是即时和顺利的。

JQuery的新手很不确定为什么会发生这种情况。任何指针都会很棒。

由于

Answer 1

只要窗口滚动，滚动处理程序就会执行，这意味着即使对于小的滚动操作，您的处理程序也会执行很多次，因此浏览器的响应速度很慢/很慢。您看到的奇怪行为是许多动画操作堆积起来然后按顺序执行的结果。

Answer 2

您的动画会针对每个滚动事件运行，即使元素已经具有它们应具有的状态。这将累积大量的动画，所以你必须等待很长时间，直到它们赶上来。

使用varible来跟踪当前状态，并仅在更改状态时设置动画：

var divs = $('.headerlogo, .headertext');
$(document).ready(function(){
  var open = true;
  $(window).scroll(function () {
    var s = $(this).scrollTop();
    if (open && s > 100) {
        open = false;
        divs.stop().fadeOut("fast"); 
        $('.header').animate({height:'35px'}, 500);
        } 
    else if (!open && s <= 100) {
        open = true;
        divs.stop().fadeIn("fast");
        $('.header').animate({height:'350px'}, 500);
        }
   });
});

演示：http://jsfiddle.net/jJyJv/1/

Answer 3

您必须仔细检查您的逻辑 - 添加元素将更改您所需的滚动值。我已将其清理干净，以便您可以检查，但是您必须使用这些值来解决问题：http://jsfiddle.net/jJyJv/2/

var divs = $('.headerlogo, .headertext');
$(document).ready(function() {
    var animating = false;
    var $window = $(window);
    $window.scroll(function () {
        if (!animating) {
            var $header = $('.header');
            if ($header.hasClass('open') && $window.scrollTop() > 100) {
                animating = true;
                divs.stop().fadeOut("fast"); 
                $header.animate({height:'35px'}, 500, function() { animating = false; }).removeClass('open').addClass('closed');
            } else if ($header.hasClass('closed') && $window.scrollTop() < 400) {
                animating = true;
                divs.stop().fadeIn("fast");
                $header.animate({height:'350px'}, 500, function() { animating = false; }).removeClass('closed').addClass('open');
            }
        }
    });
});

更好的解决方案是使用CSS3过渡，您可以在https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

阅读

JQuery反应迟钝

3 个答案: