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

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

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

干杯！

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

1 个答案: