jQuery: height difference for scrollTop and Offset.top when lined up to the top of the screen?-Collection of common programming errors

I am trying to get css animations to go off correctly when the page is scrolled to each element and so I have used this jquery as an example:

// 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);

Here is the live version of this to see: http://bbmthemes.com/themes/smart/

.animation1 is the div for the first animation. Directly above that div I have used jquery to output the value of the Offset.top of animation1 as well as the value of scrollTop, which updates as you scroll.

What I cannot understand is, why when I scroll so that the jquery variable outputs are right at the very top edge of the screen does it say that the scrollTop distance is ~430px more than the Offset.top of div.animation1 which is basically touching the top edge of the screen?

This is totally throwing off when to trigger the animations and I can’t get them to work consistently when they are on different parts of the page because the difference in those two values keeps changing.

I tried to put this into a jsfiddle but I just cannot get the problem to replicate the same way. Here is a very messy version but the values aren’t quite the same on the output: http://jsfiddle.net/UsgNY/1/