Audero Sticky is a polyfill for the CSS position: sticky
with no
dependencies and support for multiple module systems.
- Compatible with modern browsers: Internet Explorer 9+, Chrome, Opera, Firefox, Safari, iOS, Android, and more
- Lightweight: ~1.5Kb minified and gzipped
- No dependencies: It's built in raw JavaScript and has no dependencies
- 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:
*
{
box-sizing: border-box;
}
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 top
and bottom
value. While not mandatory for the library, I strongly suggest to
add the position: sticky
declaration and the relevant vendor prefixes. This will allow you to use the library only
in browsers that don't support this feature.
An example is the following:
.sticky
{
position: -webkit-sticky;
position: sticky;
top: 0;
}
Once done, you have to include the JavaScript file. How to include it in your project, depends on what tools you are using. If you downloaded the library with Bower, you can include it as shown below:
<script src="bower_components/audero-sticky/dist/audero-sticky.min.js"></script>
</body>
If you have downloaded the library via npm, read the following sections to know how to include it.
var Sticky = require('audero-sticky');
// Call Sticky methods
require(['audero-sticky'], function(Sticky) {
// Call Sticky methods
});
<script src="node_modules/audero-sticky/dist/audero-sticky.min.js"></script>
<script>
// Call Sticky methods exposed via a global object called Sticky
</script>
</body>
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 sticky
, the 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 stickingstickyend
: Triggered when the element ends sticking
Audero Sticky has the following options:
selector
(string
. Default:'.sticky'
): The selector used to identify the elements processed by this libraryactiveClass
(string
. Default:'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:
<h1 class="sticky">Audero Sticky</h1>
Now, create a new Sticky
object by passing the element to the constructor. Once done, initialize it by calling the
init()
method:
var stickyHeader = new Sticky(document.querySelector('.sticky'));
stickyHeader.init();
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 (!Sticky.isFeatureSupported()) {
var stickyHeader = new Sticky(document.querySelector('.sticky'));
stickyHeader.init();
}
If you want to use a different class name, for example fixedsticky
, you have to update the previous snippet as
follows:
if (!Sticky.isFeatureSupported()) {
var stickyHeader = new Sticky(
document.querySelector('.fixedsticky'),
{
selector: '.fixedsticky'
}
);
stickyHeader.init();
}
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 Sticky
object created. In these cases you can let the library do all the work for you:
if (!Sticky.isFeatureSupported()) {
Sticky.autoInit();
}
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:
if (!Sticky.isFeatureSupported()) {
Sticky.autoInit({
selector: '.fixedsticky'
});
}
Audero Sticky is dual licensed under MIT and GPL-3.0.