Minimal Sticky Sidebar Using jQuery

An ultra-small jQuery sticky sidebar plugin that can make the sidebar always visible when scrolling down the page.

How to use it:

1. Place the JavaScript stickySidebar.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/stickySidebar.js"></script>

2. Attach the function stickySidebar to the sidebar element and the plugin will take care of the rest.

<aside id="sidebar">
  <h3>Sidebar</h3>
</aside>

$(function(){
  $('#sidebar').stickySidebar();
});

3. Specify the distance between the sticky sidebar and the top of the page, usually slightly higher than the height of your sticky header. Default: 50.

$(function() {
  $( '#sidebar' ).stickySidebar({
    topPadding: 100
  });
});

4. Specify the duration of the animation. Default: 300.

$(function() {
  $( '#sidebar' ).stickySidebar({
    animationDuration: 500
  });
});

5. Increase the footerThreshold value to prevent the sticky element from pushing your footer element down. Default: 50.

$(function() {
  $( '#sidebar' ).stickySidebar({
    footerThreshold: 80
  });
});

---

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