npm explorer
sticky-sidebar - npm explorer

sticky-sidebar

v3.3.1

A JavaScript plugin for making smart and high performance.

stickyaffixfixedsidebarjavascriptjquery
0/weekUpdated 3 years agoThe MIT License (MIT)
Published by Ahmed Bouhuolia
npm install sticky-sidebar
RepositoryHomepagenpm

Sticky Sidebar ![Build Status](https://travis-ci.org/abouolia/sticky-sidebar)



Pure JavaScript plugin for making smart and high performance sticky sidebars.

Basic Example

Scrollable Sticky Element

See for complete documentation and examples abouolia.github.com/sticky-sidebar

Why sticky sidebar is awesome?



* It does not re-calculate all dimensions when scrolling, just neccessary 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 jquery plugin from Bowser, NPM or just simply download it from here than put `sticky-sidebar.js file in your project folder.

#### Bower

If you are using bower as package manager:

``
bower install sticky-sidebar
``

#### NPM

If you are using NPM as package manager:

``
npm install sticky-sidebar
``

Usage



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

``html










``

Note that inner sidebar wrapper
.sidebar__innner 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.

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