This time I will share jQuery Plugin and tutorial about jQuery Plugin For Sticky Sidebar Widgets – scrollsWith, hope it will help you in programming stack.
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.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="scrollsWith.js"></script> |
2. Set the start/end position of your sticky sidebar widget.
1 |
<div data-sidebar-dummy="mySidebar"></div> |
3 |
<div class="sidebar" id="mySidebar"> |
8 |
<div data-sidebar-bottom="mySidebar"></div> |
3. Call the plugin on the sidebar widget and done.
1 |
$("#mySidebar").scrollsWith(); |
4. Set the top margin in pixels when the sidebar widget is getting stuck.
1 |
$("#mySidebar").scrollsWith({ |
5. Change the default CSS class when the sidebar widget is getting stuck.
1 |
$("#mySidebar").scrollsWith({ |
5. Set the breakpoint you want to enable/disable the sticky behavior.
1 |
$("#mySidebar").scrollsWith({ |
This awesome jQuery plugin is developed by falkmueller. For more Advanced Usages, please check the demo page or visit the official website.
