Mobile-compatible Sticky Sidebar Plugin With jQuery
File Size: | 49.3 KB |
---|---|
Views Total: | 2338 |
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.