jQuery - How is this code executing without scroll?

Question

I wrote this jQuery to add a css class to animate an element when the page is scrolled to it, but if I refresh the page while the element is within the viewport the animation is triggered without scrolling at all.

This is actually how I would like it to work, but I don't understand how it is working this way. Isn't a .scroll bind not supposed to be triggered until the page is scrolled?

The reason I need to figure this out is that when the animation is played on page refresh with the element in sight, it seems to cut off the first part of it. Like on my demo, the headline area right beneath the slider that says "Why not add a headline..." has a fade in animation from .1 opacity to 1, however since the element is close to the top of the page the animation is added as soon as the page loads and it happens so fast you can barely even see it.

http://bbmthemes.com/themes/smart/

<script type="text/javascript">
// element animation
(function ($, document, undefined) {

    $(window).scroll(function() {
    var animation1 = $('.animation1').offset().top;
    var animation2 = $('.animation2').offset().top;
        var winTop = $(window).scrollTop();
        var winHeight = $(window).height()-175;
        var winWidth = $(window).width();

        if(winWidth <= 750){
        $('.animated').addClass("opacity1");
        }

        if(winTop >= (animation1-winHeight)){
        $('.animation1').addClass("animate-fade");
        }
        if(winTop >= (animation2-winHeight)){
        $('.animation2').addClass("animate-fade");
        }
    });
})(jQuery, document);
</script>

Answer 1

Sorry, I can't tell exactly but you might try adding alert('scrolling'); at the top of your event handler to debug.

This will pause the page load as soon as the event first fires and give you more clue as to when the page thinks it is being scrolled. This might uncover what's causing it.

But yes, you are correct in thinking that a .scroll is not triggered on page load.