jQuery Stuck Docs

Install

Add the latest jQuery and jQuery Stuck to the head of your html page, then initialize the plugin.

Usage

Stuck

Add the .stuck class to any responsive .row or .columns you would like fixed to the top of the page when scrolled past.

Elements will begin to stick to the top of the page, then stack underneath each other in the order they were inserted into the dom.

All .stuck elements will slide past each other if they don't overlap, or stack if they collide. This is done for you with collision detection and not by hard-coding top offsets. Check out the example page.

Release

Elements can be trained to stay at the bottom of a container when scrolling past the border. Just add the .release class to your .stuck element, then put it in a .release-container.

Try out the release example.

Being Responsive

Your responsive elements may jump up or down the page on resize, but this plugin will always maintain the correct position and stacking order. Scroll and resize this responsive example.

Performance

Performance is somewhat of a concern since this plugin uses collision detection. The collision matrix is calculated on page load so you may notice a small delay up-front, but then responsive scrolling and resizing afterward.

Go ahead and feel the load time on this 300 node performance example.