Multipurpose jQuery Sticky Sidebar Plugin - scrollWith

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:

• Stick the last item
• Stick the whole sidebar (Height > Viewport)
• Stick the whole sidebar (Height < Viewport)

How to use it:

1. Add the jQuery scrollWith plugin after you've added jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scrollwith.js"></script>

2. Assumed that you have a sidebar within the document as follows:

<div id="header">Header</div>
<div id="contentWrapper">
  <div id="main">Main content</div>
  <div id="aside">
    <div id="aside-1">Sidebar Widget 1</div>
    <div id="aside-2">Sidebar Widget 2</div>
    <div id="aside-3">Sidebar Widget 3</div>
    <div id="aside-4">Sidebar Widget 4</div>
  </div>
</div>
<div id="footer">Footer</div>

3. Stick the first sidebar widget to the top of the webpage when scrolling down.

$("#aside-1").scrollWith();

4. Stick the last sidebar widget to the top of the webpage when scrolling down.

$("#aside-4").scrollWith();

5. Stick the whole sidebar to the top of the webpage when scrolling down.

<div id="asideInner">
  <div id="aside-1">Sidebar Widget 1</div>
  <div id="aside-2">Sidebar Widget 2</div>
  <div id="aside-3">Sidebar Widget 3</div>
  <div id="aside-4">Sidebar Widget 4</div>
</div>

$("#asideInner").scrollWith();

6. Specify the top and bottom offsets.

$("#asideInner").scrollWith({
  distanceToTop: 20,
  distanceToBottom: 400
});

---

This awesome jQuery plugin is developed by springlong. For more Advanced Usages, please check the demo page or visit the official website.