Triggers Scroll

Class interactions based on scrolled amount in pixels or percents

Overview

Trigger class change when page has scrolled a desired amount of pixels or percents. You can set start and end offset, so you can dynamically add, then remove class after the reached amount.

Syntax

data-tor="scroll:class.<action>(<classes>, {<start-offset>, <end-offset>})"

Where:

• <action> - performed class action. This can be add, remove or toggle
• <classes> - a list of classes to change separated by the space
• <start-offset> - the offset amount that starts the class change in px or %
• <end-offset> - (optional) - the offset amount that ends the class change in px or %

Examples

Add class

To add a class after the scrolled amount, use class.add. This example shows how to add an .active class to the dark popup element (placed in the top right corner) when the page has scrolled over 200px. The .active class is used as a trigger to run the animation that is defined byactive:[fade.in pull.left(md) @pointer-events(none; auto)] syntax.

<div data-tor="scroll:class.add(active, {start: 200px})">Scroll to add</div>
<div data-tor="scroll:class.add(active, {start: 10%})">Scroll to add</div>

Remove class

To remove a class after the scrolled amount, use class.remove. This example shows how to remove an .active class from the blue popup element (placed in the bottom right corner) when the page has scrolled over 800px.

<div data-tor="scroll:class.remove(active, {start: 800px})">Scroll to remove</div>
<div data-tor="scroll:class.remove(active, {start: 20%})">Scroll to remove</div>

Toggle class

To toggle a class on the element, use class.toggle() action.

<div data-tor="scroll:class.toggle(active, {start: 80%})">Scroll to toggle</div>

Multiple classes

You can also change multiple classes at once, just separate them with a space.

<div data-tor="scroll:class.toggle(opacity-50 bg-dark rounded-xl, {start: 50%})">Scroll to toggle multiple classes</div>