JQuery Add Class On Scroll Issue

Question

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
            }

        }); 
    });
});

The code you've posted seems to work for me in this fiddle I made: jsfiddle.net/damo_s/xs9ndk5a — damo-s
– damo-s, Commented Apr 9, 2016 at 3:22
I noticed that it works for you in that demo... why do you think it doesn't work on my page? Its quite odd... — Nicholas J Panella
– Nicholas J Panella, Commented Apr 9, 2016 at 3:31

Greg Borbonus · Accepted Answer · 2016-04-09 03:31:49Z

3

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.

answered Apr 9, 2016 at 3:31

Greg Borbonus

1,3848 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicholas J Panella Over a year ago

Wow, that worked... Can't believe I missed that! Thanks!

Collectives™ on Stack Overflow

JQuery Add Class On Scroll Issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related