Add Class to Element when Scrolled into View

A very basic demo that adds a class to an element when it scrolls to an arbitrary distance from the top of the viewport.

In the related image switch demo, the addition of a class reveals a hidden image, that is positioned over another image, to create a before and after effect.

Works in modern browsers and IE9+

Please view the source of this page for HTML markup, CSS and JS.

Scroll Down...

The boxes below change colour...


More demos and snippets

Did you find this useful? There are more demos and code snippets this way.