jquery - jQuery:scrollTopとOffset.topを画面上部に並べた時の高さの違いは?

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 大きいと表示される理由です。画面の上端？

これは、アニメーションをトリガーするタイミングが完全にずれており、ページの異なる部分にある場合、これらの 2 つの値の違いが変化し続けるため、アニメーションを一貫して動作させることができません。

これをjsfiddleに入れようとしましたが、問題を同じように再現することはできません。これは非常に厄介なバージョンですが、出力の値はまったく同じではありません: http://jsfiddle.net/UsgNY/1/