izzi-sticky

A lightweight and simple plugin to have sticky stuff.


Keywords
sticky, javascript, sticky-elements
License
MIT
Install
bower install izzi-sticky

Documentation

version

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