$markdown{[[
Sticky-kit provides an easy way to attach elements to the page when the user
scrolls such that the element is always visible. The source can be found on
[GitHub](https://github.com/leafo/sticky-kit).
]]}
Examples
Basic Sticking
$markdown{[[
Just call `stick_in_parent` on the elements you want to be stuck inside of
their parent. Sticky elements "bottom out" so they never leave the container,
no more worrying if a sticky element will accidentally cover your footer.
]]}
$markdown{[[
Not sure if your sidebar or your main content is taller? Doesn't matter, just
call `stick_in_parent` on all columns. Sticky-kit will only stick items if they
don't take up the entire height of their parent.
]]}
$markdown{[[
Sticky elements taller than the viewport can scroll independently up and down,
meaning you don't have to worry about your content being cut off should the
sticky element be too tall or the user's resolution too small.
]]}
$markdown{[[
To install include `jquery.sticky-kit.js` after including jQuery.
Usage:
```js
$("#sticky_item").stick_in_parent()
// or
$("#sticky_item").stick_in_parent(options)
```
`options` is an optional hash of options to configure how Sticky Kit works. The
following options are accepted:
* `parent` -- The element will be the parent of the sticky item. The
dimensions of the parent control when the sticky element bottoms out. Defaults
to the closest parent of the sticky element. Can be a selector.
* `inner_scrolling` -- Boolean to enable or disable the ability of the sticky
element to scroll independently of the scrollbar when it's taller than the
viewport. Defaults to `true` for enabled.
* `sticky_class` -- The name of the CSS class to apply to elements when they
have become stuck. Defaults to `"is_stuck"`.
### Events
Various events are triggered from a sticky element when its state changes.
They are:
* `sticky_kit:stick` -- Triggered when element becomes stuck.
* `sticky_kit:unstick` -- Triggered when element becomes unstuck. (Note: an
element is still considered stuck when it has bottomed out)
* `sticky_kit:bottom` -- Triggered when element bottoms out.
* `sticky_kit:unbottom` -- Triggered when element is no longer bottomed out.
For example, if we want to log when an element sticks and unsticks we might do:
```js
$("#sticky_item").stick_in_parent()
.on("sticky_kit:stick", function(e) {
console.log("has stuck!", e.target);
})
.on("sticky_kit:unstick", function(e) {
console.log("has unstuck!", e.target);
});
```
Sticky kit listens to one event on `document.body`.
* `sticky_kit:recalc` -- trigger this event to cause all sticky elements to be
recalculated. More information below.
### Recalculating Sticky Elements
If you're changing the markup of your page on the fly by removing, adding or
resizing elements then you most likely need to tell Sticky Kit to recalculate
the sticky elements to guarantee they're positioned correctly.
You can cause a recalculation to happen by triggering an event on `document.body`:
```js
$(document.body).trigger("sticky_kit:recalc")
```
Typically you only need to trigger a recalculation if you are changing the
positions/sizes of elements above the sticky element, adjacent to it, or the
sticky element itself.
### About Columns
If you're familiar with HTML and CSS then you probably know there are a handful
of different ways to make columns. Sticky kit works automatically with floated
columns or `inline-block` columns.
### Browser Support
Sticky Kit works with all modern browsers, and IE7+.
Note: only floated columns work in IE7.
]]}