Small Sticky Sidebar In Vanilla JavaScript – FloatSidebar.js

FloatSidebar.js is a small vanilla JavaScript plugin used to create a floating sidebar that is sticky relative to any specific element on page scroll.

How to use it:

Create a sidebar in your web page.

<content class="content">
  Main content here
</content>
<aside class="aside">
  <div class="sidebar">
    <div class="sidebar__inner">
    </div>
  </div>
</aside>

Load the minified version of the FloatSidebar.js plugin at the end of the document.

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

Initialize the plugin and make the sidebar sticky relative to the main content.

var sidebar = document.querySelector('.sidebar');
var content = document.querySelector('.content');
var floatSidebar = FloatSidebar({
    sidebar: sidebar,
    relative: content
});

Set the top and bottom offsets.

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

Changelog:

11/28/2021

• v1.2.5: Prevent the sidebar from jumping when in the START or UNFIXED state

11/14/2021

• v1.2.4: Fix off-by-one errors

07/17/2020

• v1.2.3: Update package

07/01/2020

• v1.2.2: Update package

05/09/2020

• v1.2.1: Update package

07/27/2018

• v1.2.0: Upgrade dev dependencies

10/25/2018

• v1.1.0: Added custom viewport element feature support