Small Sticky Sidebar In Vanilla JavaScript – FloatSidebar.js

Category: Javascript | July 27, 2019
Author: vursen
Views Total: 2,002
Official Page: Go to website
Last Update: July 27, 2019
License: MIT

Preview:

Small Sticky Sidebar In Vanilla JavaScript – FloatSidebar.js

Description:

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:

07/27/2018

  • v1.2.0: Upgrade dev dependencies

10/25/2018

  • v1.1.0: Added custom viewport element feature support

You Might Be Interested In:


Leave a Reply