{"_id":"sticky-sidebar","_rev":"11-570c52ccd7f130892033b70658b5381f","name":"sticky-sidebar","time":{"modified":"2022-06-27T00:24:32.619Z","created":"2017-05-09T20:37:15.372Z","1.0.0":"2017-05-09T20:37:15.372Z","1.0.1":"2017-05-10T20:20:14.837Z","2.0.0":"2017-08-31T17:34:57.904Z","2.0.1":"2017-08-31T17:37:18.981Z","2.2.0":"2017-09-18T18:56:10.476Z","3.2.0":"2017-09-28T16:36:47.091Z","3.2.1":"2017-10-05T19:45:07.659Z","3.3.1":"2017-11-21T19:01:42.781Z"},"maintainers":[{"name":"abouolia","email":"a.bouhuolia@gmail.com"}],"dist-tags":{"latest":"3.3.1"},"description":"A JavaScript plugin for making smart and high performance.","readme":"# Sticky Sidebar [![Build Status](https://travis-ci.org/abouolia/sticky-sidebar.svg?branch=3.2.0)](https://travis-ci.org/abouolia/sticky-sidebar)\r\n\r\nPure JavaScript plugin for making smart and high performance sticky sidebars.\r\n\r\n[Basic Example](https://abouolia.github.io/sticky-sidebar/examples/basic.html)\r\n\r\n[Scrollable Sticky Element](https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html)\r\n\r\nSee for complete documentation and examples [abouolia.github.com/sticky-sidebar](http://abouolia.github.com/sticky-sidebar)\r\n\r\n## Why sticky sidebar is awesome? \r\n\r\n* It does not re-calculate all dimensions when scrolling, just neccessary dimensions.\r\n* Super smooth without incurring scroll lag or jank and no page reflows.\r\n* Integrated with resize sensor to re-calculate all dimenstions of the plugin when size of sidebar or its container is changed.\r\n* It has event trigger on each affix type to hook your code under particular situation.\r\n* Handle the sidebar when is tall or too short compared to the rest of the container.\r\n* Zero dependencies and super simple to setup.\r\n\r\n## Install\r\n\r\nYou 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.\r\n\r\n#### Bower \r\n\r\nIf you are using bower as package manager:\r\n\r\n````\r\nbower install sticky-sidebar\r\n````\r\n\r\n#### NPM \r\n\r\nIf you are using NPM as package manager: \r\n\r\n````\r\nnpm install sticky-sidebar\r\n````\r\n\r\n## Usage\r\n\r\nYour website's html structure has to be similer to this in order to work:\r\n\r\n````html\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n````\r\n\r\nNote 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.\r\n\r\nFor the above example, you can use the following JavaScript:\r\n\r\n````html\r\n\r\n\r\n\r\n````\r\n\r\n#### Via jQuery/Zepto\r\n\r\nYou 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.\r\n\r\n````html\r\n\r\n\r\n\r\n\r\n````\r\n\r\nMake sure to include ``sticky-sidebar.js`` script file after ``jquery.js``.\r\n\r\n## Usage with [ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js)\r\n\r\nSticky sidebar integrated with [ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/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 `