Intersection

Toggle classes when elements get in or out the viewport.

Usage

<div class="my-element" data-lg-intersection></div>
<div class="my-element" data-lg-intersection data-lg-intersection-class="my-global-class"></div>

When an element gets in or out it gets .is-in, .is-out, .is-out-top, .is-out-bottom CSS classes. The value of the data-lg-intersection-class attribute is also toggled on the html element (e.g. to change the page’s background when a section is reached).

Attributes