Question

我写了一些代码来计算到页面顶部的距离。根据距离是否为0，它会使图像消失/出现并使次要图像上/下移动。

$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
        $('#headerImg').animate({height:'0px'}, 500);
        $('#wrapperSCNav').animate({top:'185px'}, 500);
    } else {
        $('#headerImg').animate({height:'290px'}, 500);
        $('#wrapperSCNav').animate({top:'475px'}, 500);
    }
});

哪种方式有效，我很确定问题是代码正在计算scrollTop（）这么多次，以至于它需要自己的秒数来实现它的返回0。

Answer 1

您应该考虑限制滚动功能，使其在设定的间隔后触发，而不是每秒十几次。我一直建议使用Ben Alman's plugin。

对代码的修改将非常小 - 在下面的代码中，我选择限制滚动事件，使其每250ms（或每秒4次）触发。您当然可以调整此值。

$(window).scroll($.throttle(250, function(){ // Use $.throttle() before calling function
    if ($(this).scrollTop() > 0) {
        $('#headerImg').animate({height:'0px'}, 500);
        $('#wrapperSCNav').animate({top:'185px'}, 500);
    } else {
        $('#headerImg').animate({height:'290px'}, 500);
        $('#wrapperSCNav').animate({top:'475px'}, 500);
    }
})); // Extra closing parenthesis from $.throttle()

另外，在使用.stop(true,true)触发每个动画之前强行清除动画队列并跳转到结束状态也是一个好主意：

$(window).scroll($.throttle(250, function(){ // Use $.throttle() before calling function
    if ($(this).scrollTop() > 0) {
        $('#headerImg').stop(true,true).animate({height:'0px'}, 500);
        $('#wrapperSCNav').stop(true,true).animate({top:'185px'}, 500);
    } else {
        $('#headerImg').stop(true,true).animate({height:'290px'}, 500);
        $('#wrapperSCNav').stop(true,true).animate({top:'475px'}, 500);
    }
})); // Extra closing parenthesis from $.throttle()

Answer 2

也许这样的事情会有所帮助：

这只会在用户停止滚动后应用更改。

var timer;
$(window).scroll(function(){
    clearTimeout(timer);
    timer = setTimeout( refresh , 150 );
});
var refresh = function () { 
    if ($(window).scrollTop() > 0) {
        $('#headerImg').animate({height:'0px'}, 500);
        $('#wrapperSCNav').animate({top:'185px'}, 500);
    } else {
        $('#headerImg').animate({height:'290px'}, 500);
        $('#wrapperSCNav').animate({top:'475px'}, 500);
    }        
};

<强>更新

或者如果您希望它只在滚动时更改，但仅在需要时更改：

$(window).scroll(function(){
    if ($(this).scrollTop() > 0 && $('#headerImg').height() != 0) {
        $('#headerImg').animate({height:'0px'}, 500);
        $('#wrapperSCNav').animate({top:'185px'}, 500);
    } else if($('#headerImg').height() == 0) {
        $('#headerImg').animate({height:'290px'}, 500);
        $('#wrapperSCNav').animate({top:'475px'}, 500);
    }
});

Answer 3

的 jsFiddle Demo 的

$(window).scroll(function(){ if ($(this).scrollTop() > 0) { $('#headerImg').stop().animate({height:'0px'}, 500); $('#wrapperSCNav').stop().animate({top:'185px'}, 500); } else { $('#headerImg').stop().animate({height:'290px'}, 500); $('#wrapperSCNav').stop().animate({top:'475px'}, 500); } });

$。fx正在填补

每次调用animate时，具有超时的事件都会被推送到给定选择器的jQuery对象的fx队列中。当动画与滚动相关联时，会发生这种fx队列快速填充这些动画回调的情况。滚动到底部然后返回，重复将导致动画产生不希望的结果（大部分时间），因为它会导致所有动画在完成下一步之前等待每个动画完成。

使用stop来阻止

对此的常见修复是在使用animate之前在jQuery对象上调用jQuery's stop。这基本上pop来自fx队列的先前回调，允许当前动画立即运行。

JQuery长时间延迟.scrollTop（）计算

3 个答案: