Author: | vursen |
---|---|
Views Total: | 890 views |
Official Page: | Go to website |
Last Update: | November 28, 2021 |
License: | MIT |
Preview:

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:
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