Easily staple an element to be fixed at a certain height from the top of the viewport.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.gitignore
.jscsrc
.jshintrc
Gulpfile.js
LICENSE.md
README.md
package.json
staplejs-logo-github.png

README.md

staple.js logo

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.

Demo 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.