Lightweight (2kb gzipped), vanilla javascript plugin for making smart float sidebars

Demo

npm install float-sidebar

yarn add float-sidebar

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

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

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

import FloatSidebar from 'float-sidebar';

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

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

// ...

floadSidebar.forceUpdate();

// ...

floatSidebar.destroy();

Type: Element
Required

Sidebar element

Type: Element
Required

Sidebar relative element, e.g. main content

Defaults: first element child of sidebar element

Sidebar inner element

Type: Integer
Defaults: 0

Viewport top spacing when sidebar fixed

Type: Integer
Defaults: 0

Viewport bottom spacing when sidebar fixed

Force recalculate and update sidebar position

destroy plugin (doesn't delete DOM elements)

FloatSidebar.js is released under the MIT license.

Author Sergey Vinogradov