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!
You can install it using Bower
bower install pin.js
Or you can clone/download the project.
<div id="pin"></div>
new Pin('#pin');
// You can use a DOM reference as well
new Pin(document.getElementById('pin'));
<div data-pin></div>
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)
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
});
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();