自动删除类秒钟变活动

我有一个脚本工作后，因此在从页面的顶部一定距离一个div切换的背景图像。我想要的是让它在2秒后切换回原来的状态。自动删除类秒钟变活动

下删除类170像素更高版本：

<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部分，没有任何人有一个主意？

来源

2017-03-31 Sierra

你应该工作，至少超时。你有没有*工作的代码和一个问题，例如它不工作，因为它在每个滚动等触发的事件处理程序内？ – adeneo

是顶端的代码工作。第二个代码没有。它只在2800切换背景，并且从不切换。我的问题是如何让它在2秒后自动切换回来，而不是第二个滚动高度点，这是否有道理？ – Sierra

你的代码的问题是，只要你继续滚动，它会不断重新添加类。此外，你什么作为一类scrolled'的'之前做的setTimeout，所以没有给出事件侦听器 –

可以实现使用链延迟和队列相同的功能。这样你不必担心流氓setTimeout函数缺少相应的clearTimeout，并且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>

来源

2017-03-31 17:59:02 sadmicrowave

这是你想要什么，现在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一旦发射

来源

2017-03-31 18:06:26

实际上，您需要更改if语句里面hasTriggered'的'的布尔状态，以便根据需要这个工作。 – sadmicrowave

@微波好抓！ –

嗯，这似乎只是有类立即触发页面刷新，没有切换发生随着时间的推移或滚动 – Sierra

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

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

来源

2017-03-31 18:14:03

自动删除类秒钟变活动

回答

相关问题