Audero Sticky is a polyfill for the CSS
position: sticky with no
dependencies and support for multiple module systems.
Features at a glance
- Compatible with modern browsers: Internet Explorer 9+, Chrome, Opera, Firefox, Safari, iOS, Android, and more
- Lightweight: ~1.5Kb minified and gzipped
- Support for top and bottom sticky elements: The library can be used to stick elements on the top and the bottom
- Support multiple module systems: It can be used with Browserify, RequireJS, and in the browser
- Hooks available: Triggers events and adds a class name when an element starts and ends sticking
You can see the library in action by taking a look at the following demos:
- Top sticky element
- Bottom sticky element
- Multiple top sticky elements
- Multiple bottom sticky elements
- Top sticky element with the parent changing height after initialization
- Bottom sticky element with the parent changing height after initialization
Audero Sticky has been tested on the following browsers: Internet Explorer 9+, Chrome, Opera, Firefox, and Safari.
The library follows the UMD (Universal Module Definition) pattern to work seamlessly with module systems such as AMD and CommonJS, and the browser.
You can install Audero Sticky by using npm:
npm install audero-sticky
Alternatively, you can install it via Bower:
bower install audero-sticky
The last options you have to download the library are to clone the repository and copy the file contained in the
dist folder into your project and to manually download the file.
First of all, you have to ensure that your CSS is using the
border-box model. This can be set as follows:
Add a class to your CSS, for example
sticky, to specify the position your element(s) should have when in sticky
mode. The library supports any
bottom value. While not mandatory for the library, I strongly suggest to
position: sticky declaration too. This will allow you to use the library only in browsers that don't
support this feature.
An example is the following:
If you have downloaded the library via npm, read the following sections to know how to include it.
var Sticky = ;// Call Sticky methods
No module system
Audero Sticky provides the methods described in the following sections.
Tests if the
sticky value for the
position property is supported.
Autoinitializes all the elements of the page having class
sticky if no options are provided. Otherwise, it
initializes the elements matching the selector provided in the options passed.
Creates a new Sticky object.
element is the element to render as sticky.
options is an object of options
to customize the library. To use a class name different from
options parameter must be specified.
Initializes the library.
Removes the effects of the library and clean up all the resources
Audero Sticky triggers a few events on the element(s) that will stick. You can listen to these events to perform custom actions when needed:
stickystart: Triggered when the element starts sticking
stickyend: Triggered when the element ends sticking
Audero Sticky has the following options:
'.sticky'): The selector used to identify the elements processed by this library
'sticky-active'): The class name added when an element starts sticking
To see the library in action, add the
sticky class (it can be changed) to an element:
Now, create a new
Sticky object by passing the element to the constructor. Once done, initialize it by calling the
var stickyHeader = document;stickyHeader;
You can (and should) avoid to use the library for those browsers that support
position: sticky. To do that, wrap the
previous snippet with a conditional statement that uses the
isFeatureSupported() method as shown below:
if !Stickyvar stickyHeader = document;stickyHeader;
If you want to use a different class name, for example
fixedsticky, you have to update the previous snippet as
if !Stickyvar stickyHeader =documentselector: '.fixedsticky';stickyHeader;
Note how in this case I've also specified the second argument of the constructor.
Sometimes you might have multiple sticky elements in a web page or you simply don't want to further use the
object created. In these cases you can let the library do all the work for you:
This will initialize all the elements having class
sticky. If you want to use a different class name, you have to
provide an object that specifies the selector to use:
Audero Sticky is dual licensed under MIT and GPL-3.0.