每次物品滾動到視口時觸發事件

Question

我在頁面上有一些項目。當他們滾動到視圖，我的動畫類添加到他們，就像這樣：

$(window).scroll(function() { 

    var topOfWindow = $(window).scrollTop(), 
     bottomOfWindow = topOfWindow + $(window).height(); 

    $('.buckle').each(function(){ 
     var imagePos = $(this).offset().top; 

     if (imagePos < topOfWindow+400) { 
       $(this).addClass('animate'); 
     } 


    }); 

    }); 

Here's a stripped-down JSFiddle demo

這會觸發動畫每秒發生頁面加載一次：當圖像是400像素的的頂部視口，類被添加，動畫滾動，然後圖像保持靜態。

但是現在它們每次滾動到視口時都會生成一次動畫，無論用戶是向上還是向下滾動。在演示的情況下，「滾動」元素在滾動視圖之後會丟失類.animate，並且在滾動回查看時重新應用它。

什麼是最有效的方法來觸發這與JQuery？

Answer 1

我不確定我是否完全理解你，但我認爲從頂部觸發動畫400px不是一個好主意。如果窗口/視口的高度甚至小於400px，動畫將在滾動到視圖之前啓動。我認爲這應該通過窗口底部確定。

$(window).scroll(function() { 
    var topOfWindow = $(window).scrollTop(), 
     bottomOfWindow = topOfWindow + $(window).height(); 

    $('.buckle').each(function() { 
     var imagePos = $(this).offset().top; 

     if(imagePos <= bottomOfWindow && imagePos >= topOfWindow){ 
      $(this).addClass('animate'); 
     }else{ 
      $(this).removeClass('animate'); 
     } 
    }); 
}); 

這裏的演示：http://jsfiddle.net/2LPmr/1/

乾杯！