jQuery Sticky Plug-in
This plug-in allow to turn any HTML element into a sticky element. A sticky element is an element that scrolls with the rest of the page and stays stuck to the top of the window when it reaches it.
The main plugin entry is the
This method take a configuration object with one property :
This property is a number which idicates an offset (in pixel) from where the element become sticky. A positive value indicates that the element become sticky before it reaches the top of the page, a negative value indicates that the element become sticky after it reaches the top of the page.
The default value is
Overload default parameters.
It's possible to read and overload de default value of each parameter by
Impact on DOM and CSS
This plugin has two impacts on the DOM:
- It will add the
stickyclass to the element when it turns sticky.
- It will add an extra
divelement with the class
sticky-placeholderin the DOM, right after the element when it turns sticky. This extra element is removed once the target element turns unsticky.
CSS is also impacted:
- When the element turns sticky, the plugin define its position (
top) and its box model is changed: Its width is frozen and its
marginis set to 0.
sticky-placeholderelement has its box model frozen. It's highly discourage to apply any CSS rules on it.
The class add to the DOM elements can be customized by acessing the
$.fn.sticky.className object. This object has 2 propreties:
placeholderwhich define the name of the class to add to the placeholder element added after the sticky element.
stickywhich define the name of the class added to the element when it turns sticky.