jQuery Waypoints Sticky Shortcut

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:

$('.my-sticky-element').waypoint('sticky');

What This Shortcut Does

Creates a wrapper around the element. This wrapper is what actually becomes the waypoint. It remains statically positioned in your document, acting as a placeholder while the sticky element is free to gain and lose fixed positioning.
Sets that wrapper’s height. When your sticky element gains fixed positioning it will no longer have an effect on the document flow. By giving the static wrapper the same height as the sticky element, we avoid any sudden "jumps" that come with shifting content.
Adds a class to the sticky element when the user reaches it. By default, when the element reaches the top of the viewport it gains the stuck class.

What This Shortcut Does Not

Give stuck elements fixed positioning. It is left to you, the author, to give the stuck elements fixed positioning in CSS. With so many design possibilities, the script cannot make any assumptions about how the sticky element should look. The shortcut only goes as far as to add the class to give you a hook for this styling.
Adjust for the wrapper. Besides height, other CSS properties on your sticky element may effect the layout of surrounding content. Margins are one example. You should move any of these styles off of your sticky element and onto the wrapper so that they will persist during the "stuck" state.

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 and the HTML of the wrapper element. Here are the defaults:

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

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
});