javascript - 每次元素滚动到视口(viewport)时触发事件

Question

我在页面上有一些元素。当它们滚动到 View 中时，我向它们添加动画类，如下所示:

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

这会触发动画在每次页面加载时发生一次:当图像距视口(viewport)顶部 400 像素时，添加类，动画滚动，然后图像保持静止。

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

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

Answer 1

我不确定我是否完全理解你，但我认为从顶部触发动画 400px 不是一个好主意。如果窗口/视口(viewport)的高度甚至小于 400px，动画将在滚动到 View 之前启动。我觉得应该通过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/

干杯!