Question

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

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

我的jquery有什么问题呢？

这是代码的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();

Answer 2

这是一个小提示，表明您需要使用.offset().top代替.height

http://jsfiddle.net/94kP6/10/

当您使用height时，您要求滚动一直等到对象的高度，而不是等待对象的顶部位置 < / p>

只需将height更改为offset s

即可

<强>更新 http://jsfiddle.net/94kP6/14/ 这使得动画可以在屏幕中间更多地看到。只需从偏移量中减去指定的高度（在这种情况下，对象的高度），它将在更高的scrollTop处生成动画。

您也可以执行相同的操作，只需向后添加指定金额到var winTop = $(window).scrollTop();行，然后按行：var winTop = $(window).scrollTop() + 250;

jQuery addClass基于滚动多远

2 个答案: