JQuery.scrollTop（）计算上的长延迟

我写了一些代码来计算到页面顶部的距离。根据距离是否为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。

也许类似这样的东西会有所帮助：

这将仅在用户停止滚动后应用更改

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);
    }
});

---

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

这将仅在用户停止滚动后应用更改

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);
    }
});

---

你应该考虑节流功能，使它在一个设定的时间间隔内燃烧，而不是每秒几十次。我一直建议使用

对代码的修改将非常小-在下面的代码中，我选择限制滚动事件，使其每250毫秒（或每秒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）

：

---

你应该考虑节流功能，使它在一个设定的时间间隔内燃烧，而不是每秒几十次。我一直建议使用

对代码的修改将非常小-在下面的代码中，我选择限制滚动事件，使其每250毫秒（或每秒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(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);
 }
});

$。外汇正在充盈

每次调用animate时，都会将一个带有超时的事件推送到给定选择器的jQuery对象的

fx

队列中。当一个动画绑定到滚动时，会发生这样的情况：这个

fx

队列很快就会被这些动画回调填满。滚动到底部然后再返回，重复将导致动画产生不希望的结果（大多数情况下），因为这会导致在执行下一步之前等待每个动画完成

使用

停止

来防止它

常见的修复方法是在使用animate之前调用jQuery对象。这本质上是

pop

s先前从

fx

队列中的回调，允许当前动画立即运行。

$(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);
 }
});

$。外汇正在充盈

每次调用animate时，都会将一个带有超时的事件推送到给定选择器的jQuery对象的

fx

队列中。当一个动画绑定到滚动时，会发生这样的情况：这个

fx

队列很快就会被这些动画回调填满。滚动到底部然后再返回，重复将导致动画产生不希望的结果（大多数情况下），因为这会导致在执行下一步之前等待每个动画完成

使用

停止

来防止它

---

常见的修复方法是在使用animate之前调用jQuery对象。这本质上是

pop

s先前从

fx

队列中的回调，允许当前动画立即运行。

在滚动阶段的每一步都调用animate函数。特别是在启用了平滑滚动的浏览器中，这将对CPU造成极大的负担。在滚动阶段的每一步，您都要调用动画功能。特别是在启用了平滑滚动的浏览器中，这将对CPU造成极大的负担。