jquery - jQuery:当滚动到屏幕顶部时，scrollTop和Offset.top的高度差？

当页面滚动到每个元素时，我试图使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的值，scrollTop在滚动时更新。

我不明白的是，为什么当我滚动以使jquery变量输出恰好位于屏幕的顶部边缘时，它是否会说scrollTop距离比div.animation1的Offset.top大了约430px，这基本上就是触摸屏幕的上边缘？

当触发动画时，这完全不合时宜，而且当它们位于页面的不同部分时，我无法使它们一致地工作，因为这两个值的差异不断变化。

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