Sticky Any Element On Scroll - jQuery goesSticky

A lightweight, simple and performant sticky element plugin that makes any elements (e.x. header navigation, sidebar widget) fixed when scrolling down.

More features:

• Stick the element to the top relative to its parent container.
• Unstick the element when it reaches the bottom of its parent container.
• Custom top offset.
• Compatible with mobile devices.

How to use it:

1. Insert your sidebar widgets into a sidebar container as these:

<header>
  <nav class="navbar">
  <!-- Navbar content -->
  </nav>
</header>

2. Insert jQuery library and the jQuery goesSticky plugin's files into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="goesSticky.js"></script>

3. Make the header navigation fixed when you scroll down the whole body.

$(function(){

  $("header").goesSticky({ 
    scope: $("body")
  });

});

4. Set the offset at which position the element should be fixed.

$(function(){

  $("header").goesSticky({ 
    scope: $("body"),
    offset: $("header").outerHeight() // height of header
  });

});

---

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