CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Nicholas J Panella
Nicholas J Panella

Reputation: 109

JQuery Add Class On Scroll Issue

I have a problem with my add class on scroll code... instead of adding the class after scrolling past the element, it adds the class to every element as soon as the user starts scrolling.

http://sandbox.viaphase.com/ajs-presentation/

$(document).ready(function() {
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.animscroll').each( function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                $(this).addClass('SlideUp'); //Adds animation class to element
            }

        }); 
    });
});

Upvotes: 4

Views: 166

Answers (1)

Greg Borbonus
Greg Borbonus

Reputation: 1384

The problem isn't your code, $(window).height() is reporting the SAME as $(document).height();

This is because there is no DOCTYPE in your html.

add:

<!DOCTYPE html> to the top of your page, and your code should work just fine.

Upvotes: 3

Related Questions