javascript - jQuery addClass 基于滚动距离

Question

我编写了一些jquery来通过css类计算4个元素的高度并获取它们的高度，然后将高度与页面滚动的距离进行比较。如果页面已滚动到或经过每个元素，则会添加一个 css 类来为该元素设置动画。

我遇到的问题是，一旦页面滚动到第一个元素，jquery 就会将类添加到所有元素，而不是在滚动到每个元素时将类添加到每个元素。

我的 jquery 这样做有什么问题吗？

这是 jsfiddle http://jsfiddle.net/94kP6/7/

这是代码的jquery部分

// element animation scroll detection
(function ($, document, undefined) {
    var animation1 = $('.animation1').height();
    var animation2 = $('.animation2').height();
    var animation3 = $('.animation3').height();
    var animation4 = $('.animation4').height();

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        if(winTop >= (animation1)){
        $('.animation1').addClass("animate-from-left");
        }
        if(winTop >= (animation2)){
        $('.animation2').addClass("animate-from-right");
        }
        if(winTop >= (animation3)){
        $('.animation3').addClass("animate-from-left");
        }
        if(winTop >= (animation4)){
        $('.animation4').addClass("animate-from-right");
        }
    });
})(jQuery, document);

Answer 1

var animation1 = $('.animation1').height();
var animation2 = $('.animation2').height();
var animation3 = $('.animation3').height();
var animation4 = $('.animation4').height();

需要

var animation1 = $('.animation1').offset().top;
var animation2 = $('.animation2').offset().top;
var animation3 = $('.animation3').offset().top;
var animation4 = $('.animation4').offset().top;

或个人喜好的一些变体，如下所示:

var animation1 = $('.animation1').position().top - $('.animation1').height();
var animation2 = $('.animation2').position().top - $('.animation2').height();
var animation3 = $('.animation3').position().top - $('.animation3').height();
var animation4 = $('.animation4').position().top - $('.animation4').height();