Question

当我将页面滚动到每个元素时，我试图让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/

Answer 1

即使布局似乎是动态更改的，也不会更新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/

jQuery：当排到屏幕顶部时，scrollTop和Offset.top的高度差异？

1 个答案: