Pin.js

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)

Install

You can install it using Bower

bower install pin.js

Or you can clone/download the project.

Usage

With JS

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

Without JS

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.

Documentation

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

Browser Support

9 ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Maintainer

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

Contributing

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.

License

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