Izzi Sticky
A lightweight and simple plugin to have sticky stuff.
#Install
Using npm
command, it’s as simple as this :
npm i -D izzi-sticky
If you use bower, you can just do
$ bower i izzi-sticky
Or you could just download the files on GitHub.
How to use
var izziSticky = new IzziSticky('[data-sticky]');
<div data-sticky>This item will be sticky</div>
You can pass either a html object, or a selector in a string.
Check the demo files for an example.
Options
You can also pass options to the plugin to change it’s default settings, like this:
var izziSticky = new IzziSticky('[data-sticky]', {
heightValue: 200, // 200px
classIsSticky: 'is-sticky'
});
Option | Default value | Type | Description |
---|---|---|---|
heightValue | 0 | int | Define the value of the height when the class "sticky" should be applied |
classIsSticky | is-sticky | string | The class name to be applied when the element is set to "sticky" |
onStick | null | function | A callback function to be called when the sticky magic is applyed |
onUnstick | null | function | A callback function to be called when the sticky magic is removed |
TODO
- Add constraint element (an element to move within)
- Add the possibility to define options in html data attribute