1

当页面滚动到每个元素时，我试图让 css 动画正确关闭，所以我以这个 jquery 为例：

// element animation scroll detection
(function ($, document, undefined) {
    var animation1 = $('.animation1').offset().top;

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        var winHeight = $(window).height();

        if(winTop >= (animation1-winHeight)){
        $('.animation1').addClass("animate-from-left");
        }

        $('.scrollTop').html("scrollTop: "+winTop);
        $('.elementOffset-top').html(" element Offset.top: "+animation1);
    });
})(jQuery, document);

这是该版本的实时版本：http: //bbmthemes.com/themes/smart/

.animation1 是第一个动画的 div。在该 div 的正上方，我使用 jquery 来输出 animation1 的 Offset.top 的值以及 scrollTop 的值，滚动时会更新。

我无法理解的是，为什么当我滚动以使 jquery 变量输出正好位于屏幕的最顶部边缘时，它是否说 scrollTop 距离比 div.animation1 的 Offset.top 大〜430px，这基本上是触摸的屏幕的顶部边缘？

这完全抛弃了何时触发动画，当它们位于页面的不同部分时，我无法让它们始终如一地工作，因为这两个值的差异不断变化。

我试图将其放入 jsfiddle 中，但我无法以相同的方式复制问题。这是一个非常混乱的版本，但输出的值并不完全相同：http: //jsfiddle.net/UsgNY/1/

4

1 回答 1

2

animation1 变量永远不会更新，即使布局似乎是动态更改的。结果是animation1 保存了animation1 最初放置方式的偏移量。要解决这个问题，您只需在每次滚动页面时在本地设置要初始化的变量。像这样：

// element animation scroll detection
(function ($, document, undefined) {

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        var winHeight = $(window).height();
        var animation1 = $('.animation1').offset().top;

        if(winTop >= (animation1-winHeight)){
        $('.animation1').addClass("animate-from-left");
        }

        $('.scrollTop').html("scrollTop: "+winTop);
        $('.elementOffset-top').html(" element Offset.top: "+animation1);
    });
})(jQuery, document);

您当然可以使用每次布局更改时更新的全局变量，但我发现这个解决方案更容易。

这是一个更正的 jsFiddle：http: //jsfiddle.net/gL2y4/

于 2013-08-06T09:54:24.983 回答