A lightweight and simple plugin to have sticky stuff.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
docs
src
.eslintrc.js
.gitignore
.npmignore
LICENSE
README.md
bower.json
gulpfile.js
package-lock.json
package.json
yarn.lock

README.md

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