Stick Anything You Want To The Top On Scroll - jQuery StickMe

StickMe is a lightweight and simple-to-use jQuery Sticky Element plugin that makes any elements (e.g. header navigation, sidebar widget) fixed on the top when you scroll past them.

How to use it:

1. Load the minified version of the StickMe plugin after loading the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.stickme.js"></script>

2. Add the CSS class 'stickme' to the target element which should be Stick on page scroll.

<nav class="stickme">
  I'm a sticky navigation
</nav>

<aside class="stickme">
  I'm a sticky sidebar widget
</aside>

3. Call the function and the plugin will do the rest.

$(function(){
  $.stickme();
});

4. You can also initialize the plugin without the 'stickme' class.

<nav class="nav">
  I'm a sticky navigation
</nav>

<aside class="aside">
  I'm a sticky sidebar widget
</aside>

$.stickme({
  target: $('.nav') 
});

$('.aside').stickme();

5. Determine the distance from the top when the element gets fixed. Default: 0.

$('.aside').stickme({
  top: 10
});

6. Destroy the plugin.

var stickedElement = $('.aside').stickme();

stickedElement.destroy();

7. Callback functions which will be fired depending on the current sticky status.

$('.aside').stickme({
  onStick: function(e, target) {
    // do something
  },
  onUnstick: function(e, target) {
    // do something
  }
});

8. Event handlers.

var stickedElement = $('.aside').stickme();

stickedElement.on('onStick', function(e, target) {
  // do something
});

stickedElement.on('onUnStick', function(e, target) {
  // do something
});

stickedElement.on('onDestroy', function(e, target) {
  // do something
});

---

This awesome jQuery plugin is developed by martinmethod. For more Advanced Usages, please check the demo page or visit the official website.