滾動功能在看到元素時激活

Question

當用戶滾動到頁面上的某個部分時，我有3張圖片會自動向右移動（通過CSS轉換）。

我的代碼存在的問題是，即使您甚至看不到圖像，也會過早地激活「向右移動」。如果我重新加載頁面，並保持在應該移動的圖像上，並向上或向下滾動，則可以正常工作。

我認爲有一個問題，激活滾動功能... 是否有可能說移動圖像的CSS類被激活在一定的高度？

這是我當前的代碼：

$(window).scroll(function(event) { 

    var y = $(this).scrollTop(); 

    if (y >= 600) { 

     $('#number1').addClass('animate'); 
     $('#number2').addClass('animate'); 
     $('#number3').addClass('animate'); 
    } 
}); 

Answer 1

您可以檢查一個元素是否在檢視這樣的：How to tell if a DOM element is visible in the current viewport?

您可以運行檢查和滾動如果這是真的，當窗口加載或滾動。由於圖像全部在y座標上，因此可以使用第一個元素進行檢查：＃number1。