Triggering an event as soon as the element is scrolled on to the screen

Question

I have an element with the id ig-container. I want to add classes like

$("#ig-container").addClass("animated bounceInRight");

to that element as soon it is visible on the screen. By doing this I can achieve an animation on that element when the user scrolls over that element.

How would I do this?

PS: I tried using .is(":visible") but it did not work as I wanted since this checks whether the element is present in DOM.

look here, sounds sensible to me http://stackoverflow.com/questions/9097501/show-div-when-scroll-position — tomhre, Jul 07 '14 at 14:29
Or you can use libraries like [onScreen()](http://silvestreh.github.io/onScreen/) or [jQuery Waypoints](http://imakewebthings.com/jquery-waypoints/) for that. — RWAM, Jul 07 '14 at 14:31

score 0 · Answer 1 · answered Jul 07 '14 at 15:17

example of my own here, make sure you use doctype otherwise $(window).height() returns document height

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script>
            $(document).ready(function(){
                $(window).scroll(function(){

                if(($('.diff').offset().top+$('.diff').height()) < ($(window).scrollTop() + $(window).height()))
                {    
                    $('.diff').addClass('green');
                }
                });
            });
        </script>

        <style>
            .green { background:#0F0 !important; }
        </style>    

    </head>
    <body>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">2</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">3</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">4</div>
        <div class="diff" style="min-height:250px; margin-bottom:10px; background:#00F;">THIS ONE</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
    </body>
</html>

scroll slowly and you should see that as soon as you are passed the blue div it changes to green

hope it helps

tomhre

Triggering an event as soon as the element is scrolled on to the screen

1 Answers1