[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.

Related

• Add Class to Target-Element when Trigger-Element is Scrolled into View (with Throttle and Debounce)
• Add Class to Target-Element when Trigger-Element is Scrolled into View (Reduced - no Throttle or Debounce)
• Add Class to Element when Scrolled into View (with Throttle and Debounce)
• Add Class to Element when Scrolled into View (Basic)

More demos and snippets

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