Make any element stick to the top of the page when scrolling down
CoffeeScript JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
coffee
examples
src
.editorconfig
.gitattributes
.gitignore
Gruntfile.coffee
LICENSE.txt
README.md
bower.json
package.json

README.md

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/