Sticky

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

View Demo

Using Sticky

Main

sticky.js

Dependencies

jQuery
core.js

Basic

Sticky will apply fixed positioning to an element as the user scrolls past the original vertical offset:

$(".sticky").sticky();

<div class="sticky">
  ...
</div>

Offset

Adjust the vertical offset by setting the offset option:

$(".sticky").sticky({
  offset: 100
});

Container

Use the data-sticky-container attribute to define a parent element. The target element will stick to the bottom of the container when completely passed:

<div class="container">
  <div class="sticky" data-sticky-container=".container">
    ...
  </div>
</div>

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-sticky-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name	Type	Default	Description
maxWidth	string	'Infinity'	Width at which to auto-disable plugin
minWidth	string	'0'	Width at which to auto-disable plugin
offset	int	0	Element offset for activating sticky position

---

Events

Events are triggered on the target instance's element, unless otherwise stated.

Event	Description
passed.sticky	Element passed
stuck.sticky	Element stuck
unstuck.sticky	Element unstuck

---

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.sticky("defaults", { ... });

Parameters

Name	Type	Default	Description
options	object	{}	New plugin defaults

destroy

Removes plugin instance.

$(".target").sticky("destroy");

disable

Disables instance.

$(".target").sticky("disable");

enable

Enables instance.

$(".target").sticky("enable");

resize

Updates instance.

$(".target").sticky("resize");

---

CSS

Class	Type	Description
.fs-sticky-element	element	Target elmement
.fs-sticky-clone	element	Cloned elemtn
.fs-sticky.fs-sticky-stuck	modifier	Indicates stuck state
.fs-sticky-clone.fs-sticky-stuck	modifier	Indicates stuck state