jQuery Plugin For Sticky Sidebar Widgets - scrollsWith
File Size: | 6.66 KB |
---|---|
Views Total: | 1614 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin for sticky sidebar that makes any DOM element fixed within your sidebar when the user scrolls past it.
How to use it:
1. Add both jQuery library and the jQuery scrollsWith's script to the webpage.
<script src="jquery.min.js"></script> <script src="scrollsWith.js"></script>
2. Set the start/end position of your sticky sidebar widget.
<div data-sidebar-dummy="mySidebar"></div> <div> <div class="sidebar" id="mySidebar"> This is a sidebar! </div> </div> ... <div data-sidebar-bottom="mySidebar"></div>
3. Call the plugin on the sidebar widget and done.
$("#mySidebar").scrollsWith();
4. Set the top margin in pixels when the sidebar widget is getting stuck.
$("#mySidebar").scrollsWith({ margin_top: 30 });
5. Change the default CSS class when the sidebar widget is getting stuck.
$("#mySidebar").scrollsWith({ fixedClass: 'fixed' });
5. Set the breakpoint you want to enable/disable the sticky behavior.
$("#mySidebar").scrollsWith({ minWidth: 200 });
This awesome jQuery plugin is developed by falkmueller. For more Advanced Usages, please check the demo page or visit the official website.