jQuery Waypoints

Sticky Elements

First include the shortcut script.

<script src="/path/to/waypoints-sticky.min.js"></script>

The Sticky Elements shortcut is used to make elements "stick" to the top of the page when the user scrolls past. It packages a few best practices around this pattern into one simple function extension of jQuery Waypoints. The most basic usage looks like this:


What This Shortcut Does

What This Shortcut Does Not

The "sticky" waypoint method may also be passed an options object. This options object can be used to override the class name of the "stuck" state, the direction(s) in which the stuck class should be applied, and the HTML of the wrapper element. Here are the defaults:

$('.my-sticky-element').waypoint('sticky', {
  direction: 'down right',
  stuckClass: 'stuck',
  wrapper: '<div class="sticky-wrapper" />'

This options object is just an extension of the regular Waypoints options object, so you can pass along any traditional options you may want. A common one is the offset option.

$('.my-sticky-element').waypoint('sticky', {
  offset: 30 // Apply "stuck" when element 30px from top

If you would like to destroy a sticky shortcut you can pass waypoints the "unsticky" string.