FloatSidebar.js

Lightweight (2kb gzipped), zero-dependency javascript library for making float sidebars based on the finite state machine

Demo

This library based on the finite state machine pattern. It allowed to get a much more simple and reliable solution.

You can read more about this approache in the article on medium (in russian)

Install

npm install float-sidebar

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.
    It will prevent the infinite growth of the sidebar height if you are using the library with 'infinite scroll'
  */
  align-items: flex-start;
}

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

  /* Required. The sidebar element must 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

sidebar

Type: Element
Required

Sidebar element

relative

Type: Element
Required

Sidebar relative element, e.g. main content

viewport

Type: Element
Defaults: window

Viewport element

sidebarInner

Type: Element
Defaults: first element child of sidebar element

Sidebar inner element

topSpacing

Type: Integer
Defaults: 0

Viewport top spacing when sidebar fixed

bottomSpacing

Type: Integer
Defaults: 0

Viewport bottom spacing when sidebar fixed

Instance API

forceUpdate()

Force recalculate and update sidebar position

destroy()

Destroy plugin (doesn't delete DOM elements)

License

FloatSidebar.js is released under the MIT license.

Author Sergey Vinogradov