jQuery Plugin For Creating Sticky Html Elements - Sticky Kit

File Size: 251 KB
Views Total: 6596
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Creating Sticky Html Elements - Sticky Kit

Sticky Kit is a lightweight (~2kb minified) jQuery plugin for easily creating sticky html elements on your web page, such like fixed position header, footer, side bar, etc.

Basic Usage:

1. Include jQuery Sticky Kit Plugin on the web page, after jQuery library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.sticky-kit.min.js"></script>

2. The html

<div class="content" data-sticky_parent>

<div class="sidebar" data-sticky_column>
    This is a sticky column

<div class="main" data-sticky_column>
    This is the main column


3. Call the plugin with default options.


4. All the plugins.

// The element will be the parent of the sticky item.
// Defaults to the closest parent of the sticky element. 
// Can be a selector.
parent: null,

// Enable or disable the ability of the sticky element to scroll 
// independently of the scrollbar when it’s taller than the viewport. 
inner_scrolling: true,

// The name of the CSS class to apply to elements when they have become stuck. 
sticky_class: 'is_stuck',

// Offsets the initial sticking position by of number of pixels
// Can be either negative or positive.
offset_top: 0,

// Enable or disable bottoming
enable_bottoming: true

Change logs:

v1.1.2 (2015-04-30)

  • recalc on next tick if document height changes
  • support undefined/auto margin-top in IE.
  • Fix issue where tick/recalc could get called after detach which would cause sticky element to be removed. 
  • Full height calculation takes offset into account.
  • provide custom implementation of outer width to avoid jquery rounding.

v1.1.0 (2014-11-14)

  • add option to disable bottoming
  • add recalc_every option

v1.0.4 (2014-03-30)

  • you can pass spacer to false to disable

v1.0.4 (2014-03-30)

  • make element width be aware of border-box

v1.0.2 (2013-11-17)

  • Add `sticky_kit:detach`, 
  • Bug fixes: remove  stray top attribute when unfixing, 
  • fix issue with top when inner scrolling,
  • handle variable width elements correctly, 
  • recalc is called on window resize

v1.0.1 (2013-09-12)

  • Added offset_top option, fixed recaclc when items are already stuck

This awesome jQuery plugin is developed by leafo. For more Advanced Usages, please check the demo page or visit the official website.