Small jQuery Sticky Element Plugin - Stickthis

Just another jQuery plugin that dynamically sticks any html element to the top of the browser window on vertical page scrolling. It also has the ability to change the CSS class as well as executing a 'complete' callback function as the element has reached the top of the webpage.

How to use it:

1. Add the minified version of jQuery Stickthis plugin to the webpage, after you've added jQuery library.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="js/jquery.stickthis.min.js"></script>

2. Create a sticky sidebar for your webpage.

<aside class="stickthis">
  <h3>Sticky Sidebar</h3>
</aside>

3. Initialize the plugin to make the sidebar always in view when scrolling down.

$(".stickthis").stickthis();

4. By default, the plugin will automatically add a CSS class 'sticked' to the sidebar when it reaches the top of the webpage. Style the sticky sidebar whatever you like.

.sticked {
  float: none;
  position: fixed;
  top:0;
  z-index:10;
  background-color:#FD1472;
  color: #fff;
}

5. Option and callback available.

$(".stickthis").stickthis({
  classname : "sticked", // css class
  complete : function(){ 
    // do something
  }
});

---

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