Creating A Fixed Position Sidebar With jQuery Sticky Sidebar Plugin
File Size: | 12.6KB |
---|---|
Views Total: | 46279 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.