激活后自动删除类的秒数

Question

我有一个脚本，以便div的背景图像在离页面顶部一定距离处切换。我想要的是让它在2秒后切换回原来的状态。

下面的代码稍后会删除类170px：

<script>
jQuery(document).scroll(function(){
var fromTopPx = 2800; // distance to trigger
var scrolledFromtop = jQuery(document).scrollTop();
if(scrolledFromtop > fromTopPx){
    jQuery('#image').addClass('scrolled');
}else{
    jQuery('#image').removeClass('scrolled');
}
var fromTopPx = 2970; // distance to trigger
var scrolledFromtop = jQuery(document).scrollTop();
if(scrolledFromtop > fromTopPx){
    jQuery('#image').removeClass('scrolled');
}
});
</script>

但我希望它能自动切换回来：

<script>
jQuery(document).scroll(function(){
var fromTopPx = 2800; // distance to trigger
var scrolledFromtop = jQuery(document).scrollTop();
if(scrolledFromtop > fromTopPx){
    jQuery('#neediioneimg').addClass('scrolled');
}else{
    jQuery('#neediioneimg').removeClass('scrolled');
}
setTimeout(function(){
$('.scrolled').removeClass('scrolled');
},2000);
});
</script>

我对setTimout部分不太确定，有谁知道吗？

Answer 1

您可以使用链式延迟和队列实现相同的功能。这样，您就不必担心缺少相应clearTimeout的恶意setTimeout函数，并且可以保证removeClass只出现在最初添加类的DOM元素上，因为removeClass操作应用于$(this)。

此外，此逻辑将继续为超过2800像素标记的每个滚动像素触发。这可能不是您想要的。因此，一个简单的修复方法是在if语句中将运算符逻辑设置为==而不是> (见下文)。但您可能希望修改确定用户滚动到何种程度的方式，并以一种只触发一次的方式实现该功能。

下面这样的代码应该适用于您的暂停/自动删除功能：

<script>
$(document).scroll(function(){
    var fromTopPx = 2800; // distance to trigger
    var scrolledFromtop = $(document).scrollTop();

    // also, I would change the > to ==, this way it only fires once.
    if(scrolledFromtop == fromTopPx){
        $('#neediioneimg').addClass('scrolled')
             .delay(2000) // pauses for n milliseconds
             .queue(function(next){ 
                 $(this).removeClass('scrolled');
                 next(); 
             });
     } 

});
</script>

Answer 2

这就是您想要的，现在使用fiddle example

var fromTopPx = 2800; // distance to trigger
var hasTriggered = false;

jQuery(document).scroll(function(){
    var scrolledFromtop = jQuery(window).scrollTop();

    if((scrolledFromtop > fromTopPx) && !hasTriggered ){
        hasTriggered = true;
        jQuery('#neediioneimg').addClass('scrolled');

        setTimeout(function(){
            $('.scrolled').removeClass('scrolled');
        },2000);
    }
});

编辑:触发后忘记将标志设置为true

Answer 3

那么问题是什么呢？这段代码能工作吗？是。这段代码能在中正常工作吗？不是的。当你滚动页面时，它会多次设置一个新的超时，它不会检查你是否从顶部开始是2800px，或者如果设置了class，或者队列中是否有另一个超时，它只会在滚动的每个像素上设置一个新的超时。你应该这样做：

<script>
  // did we got back if previously scrolled more than triggerDistance
  var readyToHandleScrolling = true;

  // save the timer
  var timer = undefined

  $(document).on('scroll', function(){
    // distance from top to react on
    var triggerDistance = 2800; 

    // current distance from top
    var currentDistance = $(document).scrollTop();

    if (currentDistance >= triggerDistance) {
      // ignore if we haven't get above triggerDistance yet
      if (!readyToHandleScrolling) return;

      $('#neediioneimg').addClass('scrolled');

      timer = setTimeout(function(){
        $('#neediioneimg').removeClass('scrolled');
      }, 2000);

      readyToHandleScrolling = false;
    } else {
      // if we got above triggerDistance
      // clear timeout
      clearTimeout(timer);

      // remove class
      $('#neediioneimg').removeClass('scrolled');

      // show we are ready to handle a new event
      readyToHandleScrolling = true;
    }
  });
</script>