Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Easily staple an element to be fixed at a certain height from the top of the viewport.

Resources

License

Packages

No packages published