2

我编写了一些 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);
4

2 回答 2

2 
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();
于 2013-08-05T21:36:12.990 回答
1

这是一个小提琴，显示您需要使用.offset().top而不是.height

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

使用时height，您是在要求滚动条等到对象的高度，而不是等待对象的顶部位置。

只需将您height的 s 更改为offsets

更新 http://jsfiddle.net/94kP6/14/ 这使得动画可以在屏幕中间看到更多。只需从偏移量中减去指定的高度（在本例中为对象的高度），它就会在更高的 scrollTop 处进行动画处理。

你也可以做同样的事情，只是向后添加一个指定的数量到该var winTop = $(window).scrollTop();行，行：var winTop = $(window).scrollTop() + 250;

于 2013-08-05T21:39:59.497 回答