Jquery StickToTop

A JQuery plugin to make your elements stick to the top when scrolling a webpage. It takes the initial position of any element and gives the element a fixed position when scrolling past it, ensuring the element always stays in view.

Perfect for sidebars.

Bower

bower install jquery-sticktotop

Usage

$('aside').stickToTop(options);

Options

Option	Description
scrollParent:	Element in which scrolling is monitored. default: DOM window
offset:	Scroll offset to apply fixed positioning (sticking). Basically the gap left at all times between the scrollParent and the target element. default: {top: 0, left: 0}
bottomBound:	Scroll value relative to the bottom which to stop the element from sticking (absolute positioning). Useful if you have a large footer and dont want your sidebar crashing into it. default: false (no bottom bound)
minWindowHeight:	The minimum height of the parent/window in which stickToTop will be active. If less than the minimum height stickToTop will have no effect but will become active as soon as the parent/window height is greater than minWindowHeight. default: false (no min height)
minWindowWidth:	The minimum width of the parent/window in which stickToTop will be active. If less than the minimum width stickToTop will have no effect but will become active as soon as the parent/window width is greater than minWindowWidth. Useful for disabling stickToTop for mobile and tablet viewports. **Note: If using ems for your media queries, make sure to multiply your value by 16 to set minWindowWidth as a pixel value.<br> <a href="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/">Browsers calculate media-query widths from the base UA font size</a>, <strong>NOT</strong> stylesheet base font size.<br><br> default: false (no min width)</td>
preserveLayout:	Preserves layout of sticky elements by adding a div which occupies the original flow. **Note: Floated elements do not occupy flow in the same manner as non-floated elements.<br> preserveLayout should be set to false when stickToTop is applied to floated elements.<br><br> default: true</td>
onStick:	Callback for when the element becomes sticky. default: null
onDetach:	Callback for when the element becomes detached. Also fires when the bottomBound is reached. default: null

Note: bottomBound now includes the height of the sticky element in the calculation to make bottomBound more intuitive (issue #1)

unstickToTop

You can detach stickToTop from your element by using the unstickToTop() function

var $aside = $('aside');

// Attach
$aside.stickToTop();

...
// Detach
$aside.get(0).unstickToTop();

Examples

Sidebar

The "normal" use-case for this plugin demostrated applying the plugin to a side and menu bar.

Tetris Hearts

Using this plugin to position many elements (in this case a canvas with a tetris block painted inside of it) and stick them to their appropriate places while scrolling to form a heart.

Visit this blog post for a full explanation

License

MIT: http://fixate.mit-license.org/