sticky-div

A jQuery plugin that forces a div to stick to the top or bottom of the viewport if the user scrolls past it.

Inspired by the blog post "Stick div at top after scrolling" by YJL.

Sample usage:

HTML:

<div id="my_div">
  ...
</div>

JavaScript:

$('#my_div').sticky_div();

// Or:

var options = {
  top: 0,
  min_screen_width: 0,
  min_screen_height: 0,
  bottom: 0,
  stick_bottom: false,
  outer_div: null,
  style_css: null
};
$('#my_div').sticky_div(options);

Options:

• top (default: 0px)
  This represents the buffer you want between the top of the page and the div in pixels.

• min_screen_width (default: 0px)
  This represents the minimum screen width that the stickiness will be applied at.

• min_screen_height (default: 0px)
  This represents the minimum screen height that the stickiness will be applied at.

• bottom (default: 0px)
  This represents the buffer you want between the bottom of the page and the div in pixels.

• stick_bottom (default: false)
  This is a boolean value (true/false) to indicate if the sticky div sticks to the bottom of the viewport.

• outer_div (default: null)
  This is a jQuery or DOM element whose height needs to be greater than the div in order to make it sticky.

• style_css (default: null)
  This is an optional setting that allows you to specify a CSS class to extend the styles applied to the sticky div.