A Lightweight Javascript Library For Making A Sidebar Float | FloatSidebar.js

FloatSidebar.js is a lightweight javascript library (2 KB compressed), a dependency-free javascript library for creating a floating sidebar.

The library is built above the finite state machine pattern, resulting in a straightforward solution that is easy to understand and maintain.

Must Read: Responsive Sidebar Menu With SubMenu HTML CSS and JavaScript

How to make use of it:

1. Create a sidebar on your web page.

<content class="content">
  Main content here
</content>

<aside class="aside">
  <div class="sidebar">
    <div class="sidebar__inner">

    </div>
  </div>
</aside>

2. Load the FloatSidebar.js plug-in at the end of the document.

<script src="float-sidebar.min.js"></script>

3. Configure the plugin and make the sidebar static relative to the main content.

var sidebar = document.querySelector('.sidebar');
var content = document.querySelector('.content');

var floatSidebar = FloatSidebar({
    sidebar: sidebar,
    relative: content
});

4. Set up and down offsets.

var sidebar = document.querySelector('.sidebar');
var content = document.querySelector('.content');

var floatSidebar = FloatSidebar({
    sidebar: sidebar,
    relative: content,
    topSpacing: 40,
    bottomSpacing: 40
});

See Demo And Download

Official Website(vursen): Click Here

This superior jQuery/javascript plugin is developed by vursen. For extra Advanced Usage, please go to the official website.

Tags: finite-state-machinefloatFloatSidebar.jsmicrojssidebarStickysticky-sidebarvursen