Scroll Swap

Requires jQuery
Requires my-scroll.js

Basics

This script swaps CSS classes when window scroll threshold is exceeded, then rolls back original classes when window scroll is below default or custom threshold.

Scroll down!,
This text changes its color when amount of scroll exceeds 100 pixels.
u-c-support-success replaces current classes.

This paragraph gets orange when scroll exceeds default threshold because the default swap class is u-c-support-warning.

This paragraph disappears when scroll exceeds default threshold.


/* DEMO ONLY */
body {height:200vh;}
p:first-child {margin-top:160px; font-size:16px;}
.my-scroll-swaped {color:orange;} /* Default swap class */

Settings

my-scroll.js contains myScroll.defaults object with all default settings:

Global parameter	Data attribute	Type	Description
`threshold`	`my-scroll-threshold`	number	Default threshold in pixels
`swap`	`my-scroll-swap` or `my-scroll-classes`	string	Default scroll swap classes if no custom swap classes are defined
`onSwap`	`mod-onswap`	function	Optional callback function to invoke when a swap is triggered

// Example of myScrollTo.defaults
threshold: 200, // Default threshold in pixels
swap: 'myClass1 myClass2' // Default scroll swap classes if no custom swap classes are defined
onSwap: anyCustomFunction() // Function triggered when a swap is executed

// Current settings
threshold: 100,
swap: 'my-scroll-swaped'
onSwap: function() {}

Threshold

Threshold is the amount of scroll before swap. This feature allows to set a custom theshold on a specific element. Just add my-scroll-threshold custom attribute containing a integer in pixels.

Amount of scroll

Simply triggers the swap when exceeding a scroll top amount.

Scroll down!,
This text changes its color when amount of scroll exceeds 10 pixels.

Scroll down!,
This text changes its color when amount of scroll exceeds 50 pixels.


/* DEMO ONLY */
body {height:200vh;}
p:first-child {margin-top:60px;}

DOM elements

Instead of amount of scroll top, it is possible to set DOM elements in the viewport as trigger for the swap.

Scroll down!,
This text changes its color when #foo element or .bar are visible into the viewport.


/* DEMO ONLY */
p {position:fixed; top:0; left:0; width:100%;}
#foo, .bar {margin-top:150vh; margin-bottom:150vh; background-color:lightgray; height:200px;}

Swap

This feature allows to set custom CSS classes on a specific element when threshold is exceeded. Just add string of class names into the my-scroll-swapor my-scroll-classes custom attribute.

Scroll down

u-faded is replaced by u-c-support-success u-fs-lg when scroll threshold is exceeded.


/* DEMO ONLY */
body {height:200vh;}
p {margin-top:50vh;}

Callbacks

When a swap is executed, myScroll.default.onSwap method is invoked. You can override this method on any element, just add a Javascript function on mod-onswap custom attribute.

Amount of swaps: 0.
A custom javascript set in mod-onswap is executed when scroll threshold is exceeded.


/* DEMO ONLY */
body {height:200vh; }
p { padding-top:100px; }


/* DEMO ONLY */
var counter = 1;
function custom() {jQuery('p span').text(counter); counter++;}

Usage examples

I fade soon

Scroll down to see the button appear. This paragraph fades when scroll exceeds 60 pixels.

Go to top


/* DEMO ONLY */
body {height:200vh;}