Mobile-compatible Sticky Sidebar Plugin With jQuery

Mobile-compatible Sticky Sidebar Plugin With jQuery
File Size: 49.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.