Fork me on GitHub

Pin.js

Dependency free plugin to Pin elements as you scroll.

Pin.js was crafted to work with modern browsers (IE9+),
also it's extremely lightweight (3.4k minified).

Quick links:

Install | Getting Started | Cool things you can do with Pin.js | Settings | Methods | Spread the Word!

Install

You can install it using Bower


bower install pin.js

Or you can clone/download the project.

Getting Started

Set your HTML markup.


<div id="pin"></div>

Pin your element!


new Pin('#pin');

// You can use a DOM reference as well
new Pin(document.getElementById('pin'));

You can also set the pinned element on the markup


<div data-pin></div>

Cool things you can do with Pin.js

The Iphone contacts list.

A fixed header for your website.

Awesome Logo

Awesome Content

These are just cool examples, it's up to you to create amazing stuff with this guy.

Have I told you that this is mobile compatible? It works smoothly on Safari for IOS and Chrome for Android.

(Protip: That means you can use it on your native app developed with HTML + CSS + Javascript)

Settings

onPin - function
Triggers a callback whenever the element is pinned.
Usage


new Pin('#pin', {
  onPin: function() {
    // code
  }
});

onUnpin - function
Triggers a callback whenever the element is unpinned.
Usage


new Pin('#pin', {
  onUnpin: function() {
    // code
  }
});

onTouchBottom - function
Triggers a callback whenever the element is touches the bottom of its parent container.
Usage


new Pin('#pin', {
  onTouchBottom: function() {
    // code
  }
});

stopOnBottom - Boolean | Default true
Stops the element when it touches the bottom of its parent container.
Usage


new Pin('#pin', {
  stopOnBottom: true
});

respectWindow - Boolean | Default true
If the height of the browser is smaller than the pinned element, it automatically gets unpinned.
Usage


new Pin('#pin', {
  respectWindow: true
});

Methods

reload
Whenever you change the size of the pinned element, you should trigger this method to recalculate the positions of the element.
Usage


var pin = new Pin('#pin');

pin.reload();

destroy
If you want to disable the pin effect, use this method and it will unbind all events attached to "window" like "scroll" and "resize".
Usage


var pin = new Pin('#pin');

pin.destroy();