每次项目滚动到视口时触发事件

我在页面上有一些项目。 当他们滚动到视图中时，我向他们添加动画类，如下所示：

$(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'); } }); }); 

这是一个精简的JSFiddle演示

这会触发每页加载动画一次：当图像从视口顶部400px时，类被添加，动画滚动，然后图像保持静态。

但现在，无论用户是向上还是向下滚动，它们都会在每次滚动到视口时进行动画处理。 在演示的情况下，“滚动”元素将在滚出视图后丢失类.animate，并在向后滚动查看时重新应用它。

使用JQuery触发此操作的最有效方法是什么？

Answer 1

我不确定我是否完全理解你，但我认为从顶部触发动画400px并不是一个好主意。 如果窗口/视口的高度甚至小于400px ，动画将在滚动到视图之前启动。 我认为应该通过windows底部确定。

 $(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/

干杯!