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 LimitationsThis 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:fixedis exactly what
position:stickyis designed for, and this script in no viable alternative. Refer to the documentation for details, and use polyfills for older browsers.
InstallationSeveral 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
UsageSimply import the
scrollPosStyler.jsscript into your HTML page at the very end of the body element. Then, add the
.spsclass to the element(s) which you want to style. Define the two CSS classes
.sps--blwand you're all set!
.sps--abvclass will be added to your element when the window is scrolled above the defined position, and
.sps--blwwill 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-offsettag 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
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.
Browser supportThe 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:
ExamplesThe script can be used for more than just styling a static navbar. The following list provides additional usage examples for those seeking some inspiration:
- Demo3 shows how to style relative offsets — thanks to @mamarmite