Simple JavaScript to add a custom CSS class to an HTML element depending on the window's scroll position. One CSS class is added when scrolling below a certain position, and another one is added when scrolling above that position.
This version is written in typescript and allows you to import the script using ES6 or Typescript syntax, and therefore bundle it with webpack or similar tools.
Original author: acch.
Bootstrap v3 has a JavaScript component named Affix. Affix can be used to modify CSS properties of an element when reaching a certain scroll position. The main use case for it is to change positioning of the element when scrolling past the element - i.e. switching from relative to fixed positioning so that the element remains visible when otherwise the user would scroll past it.
With v4 of Bootstrap, the Affix component is dropped in favor of position:sticky - which can be used to address the above use case. Many modern browsers have native support for it already, and polyfills are available for browsers which do not natively support position:sticky.
However, there are other scenarios in which Affix could be used to apply custom styles / classes to elements when reaching certain scroll positions. A common example is changing the text color and background of a fixed navigation bar upon scrolling. Initially (when the page is scrolled to the very top), the navigation bar seamlessly integrates into the page - i.e. it is flat, transparent and without any shadow. When scrolling downwards, the navigation bar 'stands out' so that it seems to be hovering above the page. The background (and text) color might change, it might drop shadow, etc.
This scenario is not addressed by position:sticky - and this is where the small ScrollPos-Styler script comes to the rescue.
Look at the demo to get a better understanding of the effect.
This script is designed to modify attributes OTHER THAN an element's position. It doesn't work well when changing positioning of an element. Switching between position:relative and position:fixed is exactly what position:sticky is designed for, and this script in no viable alternative. Refer to the documentation for details, and use polyfills for older browsers.
You'll find the original package on npm, but not this one. I'll publish it if someone asks, but otherwise you can still install it like this:
npm i -S git://github.com/Sn0wFox/scrollpos-styler.git#master
If you're old school you can import the script index.js into your HTML page at the very end of the body element.
If you're using more modern tools, you can import it ES6 style
import {ScrolPosStyler} from "scrollpos-styler";
or TypeScript style
import * as ScrolPosStyler from "scrollpos-styler";
Then, add the .sps class to the element(s) which you want to style. Define the two CSS classes .sps--abv and .sps--blw and you're all set!
The .sps--abv class will be added to your element when the window is scrolled above the defined position, and .sps--blw will be applied when it is scrolled below that position.
The default scroll position to trigger the style is 1px, meaning that as soon as the user starts scrolling the CSS class will be toggled. This can be changed by adding the data-sps-offset tag in HTML and specifying an offset or by modifying the scrollOffsetY variable in JavaScript.
You should add the .sps--abv class to the element in your HTML code already, to avoid any flickering when JavaScript is initially executed.
To style elements which were created after the page was initially loaded (i.e. using JavaScript), a public initialization function is available. Simply run ScrollPosStyler.init() to add the appropriate class based on the current scroll position. Demo2 shows you this in action.
The following options can be used in ScrollPosStyler.init():
| Name | Type | Default | Description |
|---|---|---|---|
| scrollOffsetY | number | 1 | Default scroll position in px to trigger the style. |
| spsClass | string | 'sps' | Classname used to determine which elements to style. |
| classAbove | string | 'sps--abv' | Classname added to the elements when the window is scrolled above the defined position. Default is 'sps--abv'. |
| classBelow | string | 'sps--blw' | Classname added to the elements when the window is scrolled below the defined position. Default is 'sps--blw'. |
| offsetTag | string | 'data-sps-offset' | HTML tag used on the element to specify a scrollOffsetY other than the default. |
None. The script does not require jQuery or other JavaScript libraries. While being designed for Bootstrap, it does not require it.
The script uses Window.requestAnimationFrame(), as well as Element.classList. This means that it is supported by fairly modern browsers, only (IE 10+, Firefox 23+, Chrome 24+, Safari 6.1+). I don't plan on supporting older browsers, thus don't plan to implement any workarounds.
If you need to support older browsers then these links may provide valuable information:
- http://www.html5rocks.com/en/tutorials/speed/animations/
- http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript
- https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Copyright 2015 Achim Christ, released under the MIT license.