Add class when arrive element

Question

I got the following code:

<body>
    <section id="first">
    ...
    </section>

    <section id="second">
    ...
    </div>

    <section id="third">
    ...
    </div>
</body>

And I'm trying to add a class to section#third when the page arrives the div on vertical scroll, but without specifying the height using px, just when the page meets the element.

Does anyone know how to do this?

Thanks y'all!

there are lots and lots of tutorials and plugins related to page scroll and content — charlietfl, Apr 23 '15 at 23:35
What does "page meets the element" mean? Do you mean when `#third` scrolls to become visible on screen? When it starts to become visible or when it's entirely visible? — jfriend00, Apr 24 '15 at 00:32
Ohohorion has a good answer. However, is there a specific reason that you need to apply CSS to a div when it scrolls into view? The user will only see the applied css when the div comes into view regardless of the css being applied on page load or when it scrolls into view — Walker Boh, Apr 24 '15 at 02:25

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Something like this JSFiddle?

It is called each time you scroll:

$(window).scroll(function() {

And eif you stop longer than 250ms, it will check if you are showing the wanted section, i.e.:

clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            var eTop = $('section#third').offset().top;
            if(eTop - ($(window).scrollTop()+$(window).height()) < 0) {
                alert('I am showing!');
            }
        }, 250));

References (some snippets taken) and further study:

Scroll detection

Getting element's location relative to window

Add class when arrive element

1 Answers1