Finally a dependency free Pin plugin!

Pin.js pins (duh) your elements as you scroll.

It works on all standard modern browsers, and also supports mobile devices smoothly! (Safari on IOS and Chrome on Android)

You can install it using Bower

bower install pin.js

Or you can clone/download the project.

1 - Import the pin.js script

<script src="bower_components/pin.js/dist/pin.min.js"></script>

2 - Setup an element

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

3 - Pin it!

new Pin('#pin');

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

1 - Import the pin.js script

<script src="bower_components/pin.js/dist/pin.min.js"></script>

2 - Setup an element with a data-pin attribute

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

3 - After that you have to... wait! there's no step 3 😄

You can use query selector to pin an element, but it'll take only the first element on the query.

Triggers a callback whenever the element is pinned.

Usage

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

Triggers a callback whenever the element is unpinned.

Usage

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

Triggers a callback whenever the element is touches the bottom of its parent container.

Usage

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

Stops the element when it touches the bottom of its parent container.

Usage

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

If the height of the browser is smaller than the pinned element, it automatically gets unpinned

Usage

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

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();

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();

• Mauricio Soares - http://github.com/mauriciosoares

1. Fork Pin.js
2. Create a topic branch - git checkout -b my_branch
3. Push to your branch - git push origin my_branch
4. Send me a Pull Request
5. That's it!

Please respect the indentation rules and code style.

Pin.js is released under the MIT License. See LICENSE file for details.