Background and Motivation
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
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.
Differentiation and Limitations
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: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.
Several options are available:
- Download the latest release
- Clone the repo:
git clone https://github.com/acch/scrollpos-styler.git
- Install with Bower:
bower install scrollpos-styler
- Install with npm:
npm install scrollpos-styler
Simply import the
scrollPosStyler.js script into your HTML page at the very end of the body element. Then, add the
.sps class to the element(s) which you want to style. Define the two CSS classes
.sps--blw and you're all set!
.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
You should add the
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
|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.|
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:
The script can be used for more than just styling a static navbar. The following list provides additional usage examples for those seeking some inspiration:
Copyright and license
Copyright 2015 Achim Christ, released under the MIT license.