Question

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

以下删除了170px类：

answer

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

<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>

我不确定setTimout部分，有没有人有想法？

Answer 1

您可以使用链式延迟和队列实现相同的功能。这样您就不必担心错过相应setTimeout的流氓clearTimeout函数，并且removeClass保证只会出现在您最初添加的DOM元素上class to，因为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，或者如果设置了类，或者如果队列中有另一个超时，它将只设置滚动的每个像素的新超时。你应该这样做：

<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>

激活后自动删除类秒

3 个答案: