Mobile-compatible Sticky Sidebar Plugin With jQuery

A simple, lightweight, smooth, mobile-compatible jQuery sticky sidebar plugin that automatically disables the Sticky functionality when the screen width is smaller than a breakpoint you specify.

More features:

• Can be placed on the left or right of the webpage.
• Always sticks to the top, within a specific container.
• Allows you to specify the distance from the top.

How to use it:

1. Add a sidebar to your webpage.

<div class="container">
  <div class="sidebar">
    <div class="sidebar-inner">
      Sidebar Here
    </div>
  </div>
  <div class="content">
    Main Content Here
  </div>
</div>

2. Insert the JavaScript file jquery.sticky-sidebar.min.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.sticky-sidebar.min.js"></script>

3. Call the function to make the sidebar sticky within its container.

$('.sidebar').stickySidebar({
  container: '.container',
  sidebarInner: '.sidebar-inner'
});

4. Set the margin area on the top of the sticky sidebar.

$('.sidebar').stickySidebar({
  container: '.container',
  sidebarInner: '.sidebar-inner',
  topSpacing: 30
});

5. Set the position of the sticky sidebar.

$('.sidebar').stickySidebar({
  container: '.container',
  sidebarInner: '.sidebar-inner',
  side: 'right' // default: 'left'
});

6. Set the screen width at which breakpoint the sticky sidebar should be disabled.

$('.sidebar').stickySidebar({
  container: '.container',
  sidebarInner: '.sidebar-inner',
  disableAt: 785,
});

7. Execute a function when the sidebar gets stuck.

$('.sidebar').stickySidebar({
  container: '.container',
  sidebarInner: '.sidebar-inner',
  callback: function() {
    console.log('Sticky sidebar fired!');
  }
});

---

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