This time I will share jQuery Plugin and tutorial about Multipurpose jQuery Sticky Sidebar Plugin – scrollWith, hope it will help you in programming stack.
scrollWith is a simple, lightweight, customizable jQuery plugin which makes your sidebar or specified sidebar widgets stick to the top of the webpage when you scroll past them.
More Examples:
How to use it:
1. Add the jQuery scrollWith plugin after you’ve added jQuery library.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.scrollwith.js"></script> |
2. Assumed that you have a sidebar within the document as follows:
01 |
<div id="header">Header</div> |
02 |
<div id="contentWrapper"> |
03 |
<div id="main">Main content</div> |
05 |
<div id="aside-1">Sidebar Widget 1</div> |
06 |
<div id="aside-2">Sidebar Widget 2</div> |
07 |
<div id="aside-3">Sidebar Widget 3</div> |
08 |
<div id="aside-4">Sidebar Widget 4</div> |
11 |
<div id="footer">Footer</div> |
3. Stick the first sidebar widget to the top of the webpage when scrolling down.
1 |
$("#aside-1").scrollWith(); |
4. Stick the last sidebar widget to the top of the webpage when scrolling down.
1 |
$("#aside-4").scrollWith(); |
5. Stick the whole sidebar to the top of the webpage when scrolling down.
2 |
<div id="aside-1">Sidebar Widget 1</div> |
3 |
<div id="aside-2">Sidebar Widget 2</div> |
4 |
<div id="aside-3">Sidebar Widget 3</div> |
5 |
<div id="aside-4">Sidebar Widget 4</div> |
1 |
$("#asideInner").scrollWith(); |
6. Specify the top and bottom offsets.
1 |
$("#asideInner").scrollWith({ |
This awesome jQuery plugin is developed by springlong. For more Advanced Usages, please check the demo page or visit the official website.
