Sticky-Kit

A jQuery plugin for making smart sticky elements

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.

Examples

Basic Sticking

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.

$("#sidebar").stick_in_parent()
Demo Browser

Many Sticky Items

Have a lot of sticky columns, or different sticky portions of the page? Call stick_in_parent on all the elements at once.

$(".sticky_column").stick_in_parent()
Demo Browser

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.

$("#sidebar, #main_column").stick_in_parent()
Demo Browser

Scrollable Sticky Element

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.

$("#sidebar").stick_in_parent()
Demo Browser

Reference

To install include jquery.sticky-kit.js after including jQuery.

Usage:

$("#sticky_item").stick_in_parent()
// or
$("#sticky_item").stick_in_parent(options)

You can pass a hash of options to configure how Sticky Kit works. The following options are accepted, each one is optional:

Events

Various events are triggered from a sticky element when its state changes. They are:

For example, if we want to log when an element sticks and unsticks we might do:

$("#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 also listens to an event on the sticky elements:

If you want to remove sticky kit from an element after applying it you can send that element a sticky_kit:detach event.

For example:

$("#sticky_item").trigger("sticky_kit:detach");

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 manually cause a recalculation to happen by triggering an event on document.body:

$(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.

Sticky kit has two types of internal actions, a recalc and a tick. A recalculation happens very rarely, by default only on start up and on page resize. It caches the sizes and positioning CSS of all the elements that it needs to interact with.

A tick happens on every scroll event. It’s a light weight function checks the cached values and updates state accordingly. This is done to keep the least amount of code running on each scroll event to help prevent jank and give more time to any other scroll event listeners you might have.

Instead of manually calling sticky_kit:recalc you can use the recalc_every option described above to periodically do a recalculation between ticks. Setting it to 1 will cause a recalculation to happen on every scroll event, preventing the state from ever being out of date.

$("#sticky_item").stick_in_parent({recalc_every: 1})

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, inline-block columns, or absolutely positioned elements. (Non column elements like toolbars work great as well, for example the toolbar on this site.)

Browser Support

Sticky Kit works with all modern browsers, and IE7+.

Note: only floated columns work in IE7.

Changelog

Fork me on GitHub