Creating A Sticky Sidebar With jQuery

A minimalist jQuery sticky sidebar plugin that makes your sidebar stick to the top of the browser window as you scroll down the web page.

How to use it:

1. Create a sidebar inside your main container.

<div id="main">

  <div id="sidebar">
    ...

  </div>

  <div id="content">

    ...

  </div>
  
</div>

2. Include jQuery library and the jQuery sticky sidebar plugin on the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.sticky.js"></script>

3. Call the plugin on the sidebar to make it sticky during scrolling.

$('#sidebar').sticky({
  container: '#main'
});

4. Default plugin options.

$('#sidebar').sticky({

  target: window,
  container: 'body',
  offset: 0,
  fixedTopClass: 'fixed-top',
  fixedBottomClass: 'fixed-bottom',
  events: 'scroll resize'

});

---

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