Introduction

Pushpin is our fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges. You can check out our live example: the fixed table of contents on the right.

Open Demo

Demo Code

  $('.pushpin-demo-nav').each(function() {
    var $this = $(this);
    var $target = $('#' + $(this).attr('data-target'));
    $this.pushpin({
      top: $target.offset().top,
      bottom: $target.offset().top + $target.outerHeight() - $this.height()
    });
  });
        

  // Only necessary for window height sized blocks.
  html, body, .block {
    height: 100%;
  }
        

jQuery Plugin Initialization

Here is a sample initialization of pushpin. Take a look at what the options are and customize them to your needs.

  $(document).ready(function(){
    $('.target').pushpin({
      top: 0,
      bottom: 1000,
      offset: 0
    });
  });
        

CSS Classes

A pushpinned element has 3 states. One above and below the scrolling threshold, and the pinned state where the element becomes fixed. Because pushpin changes positioning, chances are your element will look different when the states change. Use these css classes to correctly style your 3 states.

  // Class for when element is above threshold
  .pin-top {
    position: relative;
  }

  // Class for when element is below threshold
  .pin-bottom {
    position: relative;
  }

  // Class for when element is pinned
  .pinned {
    position: fixed !important;
  }
        

jQuery Plugin Options

Option Name	Description
top	The distance in pixels from the top of the page where the element becomes fixed. (Default: 0)
bottom	The distance in pixels from the top of the page where the elements stops being fixed. (Default: Infinity)
offset	The offset from the top the element will be fixed at. (Default: 0)

Removal

To remove the pushpin from an element, pass in 'remove' as the option to the pushpin function.

  //Removes pushpin and pushpin classes
  $('.tabs-wrapper .row').pushpin('remove');