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

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 像素时，添加类，动画滚动，然后图像保持静态。

但现在，无论用户是向上还是向下滚动，它们都应该在每次滚动到视口时动画一次。在演示的情况下，“Buckle”元素在滚动出视图后会丢失类 .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/

干杯！