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>

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

</div>

3. Call the plugin with default options.

$("#sidebar").stick_in_parent()

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.