Changing background-color while scrolling
(A demo for 'Add Class to Element when Scrolled into View')

By Beverley Hooton

No plugins or jQuery

The End

[Reduced] Add Class to Element when Scrolled into View

This page demos a JavaScript function that adds a class (or multiple classes) to an element when it scrolls to an arbitrary distance from the top of the viewport. The distance can be defined as a positive or negative integer, in % or px, meaning "top" is relative; 100% from top is actually the bottom of the viewport, making this a handy script for simple "element entrance" (just in view) logic.

Works in modern browsers and IE9+ (no CSS fade transitions in IE9).

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


More demos and snippets

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