Sticky Sidebar jQuery plugin

Posted on March 21, 2011 by Phil 176 comments

This jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document. The plugin has been tested in IE6-9 and all the other major browsers.

Get the code from Github

The JavaScript (jQuery)

Below is the code for the plugin, to download the code with examples use the link above.

Usage

The plugin can be used for single or multiple boxes as shown in the examples below

A Single sticky sidebar

<div id="main">
  <h2>Product catalogue</h2>
  <ul id="products">
      [...]
  </ul>
</div>
<div id="side">
   <div id="basket">
     <h3>Your basket</h3>
     <p>Total: <strong>&pound;455.00</strong></p>
     <span id="items">4</span>
   </div>
</div>

For the above snippet of a HTML page we can use the following to enable the product basket as a sticky sidebar with the default options.

$('#basket').stickySidebar();

View example

Multiple sticky boxes

<div id="left">
  <h2>Left column</h2>
  <ol id="navbox" class="stickybox">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ol>
</div>
<div id="middle"></div>
  <div id="right">
    <h2>Right column</h2>
    <div id="basket" class="stickybox">
      <h3>Your basket</h3>
      <p>Total: <strong>&pound;455.00</strong></p>
      <span id="items">4</span>
    </div>
</div>

For the above example we can use the below to set the navbox and basket boxes to both be sticky sidebars with the same options.

$('.stickbox').stickySidebar({speed: 400, padding: 30, constrain: true})

View example

Options

The Sticky Sidebar plugin has four options:

speed – how long the animation of the box should take in milliseconds (default = 250)
easing – what type of easing to use for the animation (default = “linear”)
padding – how many pixels to pad the element from the top of the window (default = 10)
constrain – if true stops sticky scrolling out of parent

Methods

The Sticky Sidebar plugin has two methods:

remove – removes the sticky selected sticky sidebars and resets to original position
destroy – removes and resets all sticky sidebars and removes event listeners