Creating A Fixed Position Sidebar With jQuery Sticky Sidebar Plugin

Sticky Sidebar is a lightweight and super simple jQuery plugin for creating a sticky sidebar that always follows the user on page scroll and auto stops when reaching the bottom.

How To Use It:

1. Insert your sidebar between header and footer element as follows:

<header>
  Header Navigation Here
</header>

<nav>
  Site navigation Here
</nav>

<aside id="sidebar">
  <div class="inside">
    Sticky Sidebar
  </div>
</aside>

<footer>
  Footer Content Here
</footer>

2. Make the sidebar sticky using the position: fixed property.

#sidebar.sticky {
  position: fixed;
}

3. Load the stickySidebar.js at the bottom but after jQuery library.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/stickySidebar.js"></script> 

4. Call the plugin on the sidebar element and done.

$('#sidebar').stickySidebar({
  // options here
});

5. All possible options to customize the sticky sidebar.

$('#sidebar').stickySidebar({

  // default selectors
  headerSelector: 'header',
  navSelector: 'nav', 
  contentSelector: '#content', 
  footerSelector: 'footer',

  // defines top margin from sidebar to navigation element
  sidebarTopMargin: 20, 

  // defines a distance from footer
  footerThreshold: 40 
  
});

Changelog:

2020-02-04

• Doc updated

---

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