staple.js

staple.js allows you to easily pin an element to be fixed at a certain height from the top of the viewport.

Demo

Download index.html and, open it in your browser to see staple.js in action.

You can read its index.html source-code example to know how to activate staple.js.

Quick Start

staple.js is easy to use. Add the script to your page, create a new Staple(), and pass in the right configurations.

Step 0: Install

Download the latest release.

Step 1: Add the `staple.min.js` file

<script src="staple.min.js"></script>

Step 2: Create your markup

<div id="staple-wrapper">
  <div id="staple">
    <!-- Everything in here gets stapled! -->
  </div>
</div>

Step 3: Create a new Staple

var staple = new Staple({
  offset: 40 // pixels
}).enable();

API

Staple([options])

The Staple constructor will setup the new Staple. You can customize the instance by passing the options parameter. The example below uses all options and their defaults:

var opts = {
  stapleId: "staple",
  wrapperId: "staple-wrapper",
  offset: 0,
  stapledClass: "stapled",
  mobileWidth: 640,
};
var sub = new Staple(opts).enable();

Options

Option	Description	Defualt
`stapleId`	Id of the element to staple	`"staple"`
`wrapperId`	Id of an element wrapping the staple	`"staple-wrapper"`
`offset`	Pixels between the staple and the top of the viewport	`0`
`stapledClass`	The class to give the staple when stapled	`"stapled"`
`mobileWidth`	A width below which the staple won't staple.	`640`

enable()

Adds the scroll listeners that will staple the element appropriately.

disable()

Unstaples any staples, and removes the scroll listeners that will staple the element.

paulolimac/staple.js