Sticky Sidebar v2 

Pure JavaScript plugin for making smart and high performance sticky sidebars, originally written by Ahmed Bouhuolia.

Why the fork?

This project was forked from the original Sticky Sidebar, written by Ahmed Bouhuolia.
As the original project is currently inactive, this fork is an attempt to revive the project and add some improvements.

Examples

Basic Example

Scrollable Sticky Element

For complete documentation and examples see blixhavn.github.com/sticky-sidebar-v2

Why is sticky sidebar so awesome?

* It does not re-calculate all dimensions when scrolling, just necessary dimensions.
* Super smooth without incurring scroll lag or jank and no page reflows.
* Integrated with resize sensor to re-calculate all dimenstions of the plugin when size of sidebar or its container is changed.
* It has event trigger on each affix type to hook your code under particular situation.
* Handle the sidebar when is tall or too short compared to the rest of the container.
* Zero dependencies and super simple to setup.

Install

You can download sticky sidebar v2 vjQuery plugin from Yarn, NPM or just simply download it from this page and link to the `sticky-sidebar.js file in your project folder.

#### Yarn

If you are using Yarn as package manager:

``
yarn add sticky-sidebar-v2
``

#### NPM

If you are using NPM as package manager:

``
npm install sticky-sidebar-v2
``

Usage

Your website's html structure has to be similar to this in order to work:

``html



``

Note that inner sidebar wrapper .sidebar__inner is optional but highly recommended, if you don't write it yourself, the script will create one for you under class name inner-wrapper-sticky. but this may cause many problems.

If your content is inside a fixed-height div with a scrollbar, this must be specified with the scrollContainer option.

For the above example, you can use the following JavaScript:

``html



``

#### Via jQuery/Zepto

You can configure sticky sidebar as a jQuery plugin, just include jquery.sticky-sidebar.js instead sticky-sidebar.js file than configure it as any jQuery plugin.

``html




``

Make sure to include sticky-sidebar.js script file after jquery.js.

Usage with ResizeSensor.js

Sticky Sidebar v2 integrated with ResizeSensor.js to detect when sidebar or container is changed. To use resize sensor with this plugin just make sure to include ResizeSensor.js before sticky-sidebar.js code whether through module loader, bundle or event inclusion as a