jQuery Plugin To Make Any Element Sticky - sticky.js

A really small, cross-browser jQuery sticky element plugin which makes any element fixed to the top of the viewport when you scroll down the webpage. The plugin will detect the scroll events and dynamically add the CSS position: fixed to the element when you scroll past it.

How it works:

1. Load both jQuery library and the jQuery sticky.js script at the end of your html document.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="src/sticky.js"></script>

2. Create an element (e.g. navigation bar) that will be sticky on window scroll.

<nav>
  <ul>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a></li>
    ...
  </ul>
</nav>

3. Make the nav sticky when it scrolled to the top of the viewport.

nav.sticky{
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: inherit;
  position: fixed;
  box-sizing: border-box;
}

nav{
  transform: translateZ(0); /* Scroll Fix in iPad */
}

4. Activate the plugin and done.

$(function(){
  $('nav').sticky();
});

---

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