自動刪除類秒鐘變活動

我有一個腳本工作後，因此在從頁面的頂部一定距離一個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

自動刪除類秒鐘變活動

回答

相關問題