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

Easy Mobile-friendly Fixed Sidebar Plugin With jQuery - sidebarFix.js
File Size: 7.83 KB
Views Total: 1388
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.