float-sidebar

FloatSidebar.js

A lightweight (2kb gzipped), zero-dependency javascript library for making a sidebar float.

Demo

The library is designed on top of the finite state machine pattern, which results in a straightforward solution that is pretty easy to understand and maintain.

More about the approach in the article on medium (in Russian)

Install

npm install float-sidebar --save

or

yarn add float-sidebar

or

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

Usage

<div class="wrapper">
  <div class="content">
    <!-- Content -->
  </div>

  <div class="sidebar">
    <div class="sidebar__inner">
      <!-- Sidebar content -->
    </div>
  </div>
</div>

.wrapper {
  display: flex;
  /* Required in case of using an infinite scroll */
  align-items: flex-start;
}

.sidebar {
  /* Required */
  position: relative;

  /* Required. The sidebar element should have a fixed width */
  width: 220px;
}

import FloatSidebar from 'float-sidebar';

const sidebar  = document.querySelector('.sidebar');
const relative = document.querySelector('.content');

const floatSidebar = FloatSidebar({
  sidebar,
  relative,
  topSpacing: 20,
  bottomSpacing: 20
});

// ...

floatSidebar.forceUpdate();

// ...

floatSidebar.destroy();

Options

Name	Type	Default	Description
sidebar	HTMLElement	Required	The sidebar element
relative	HTMLElement	Required	The sidebar relative element, e.g. the main content
viewport	HTMLElement	window	The viewport element
sidebarInner	HTMLElement	sidebar.firstElementChild	The sidebar inner element
topSpacing	number	0	The space from the top of the viewport. It is used when the sidebar is fixed.
bottomSpacing	number	0	The space from the bottom of the viewport. It is used when the sidebar is fixed.

Instance API

Method	Description
forceUpdate()	Recalculates all the dimensions and finally updates the position of the sidebar.
destroy()	Disposes the DOM listeners.

Similar libraries

• https://github.com/abouolia/sticky-sidebar

License

FloatSidebar.js is released under the MIT license.

Author Sergey Vinogradov