Easy Mobile-friendly Fixed Sidebar Plugin With jQuery - sidebarFix.js

sidebarFix.js is a very small jQuery plugin that makes the sidebar widgets be always visible when the webpage page is scrolled down or up. Even if the sidebar is longer than the screen's height.

How to use it:

1. Put both jQuery library and the jQuery sidebarFix.js script in the html page.

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

2. Create a sidebar and make it sticky within a specific container.

$('.jq_sidebar_fix').sidebarFix({
  frame: $('.container')
});

3. Set the top offset in cases where you have a sticky header nav.

$('.jq_sidebar_fix').sidebarFix({
  frame: $('.container'),
  topBuffer: 100
});

4. Fix the position issue where the sidebar is nested in the container.

$('.jq_sidebar_fix').sidebarFix({
  frame: $('.container'),
  force: true
});

Changelog:

2021-03-23

• Added 'force' option
• Fixed bugs for Firefox.

---

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