https://github.com/abouolia/sticky-sidebar
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
https://github.com/abouolia/sticky-sidebar
bower javascript jquery jquery-plugin performance-sticky-sidebars scrolling sticky-sidebar
Last synced: about 1 month ago
JSON representation
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
- Host: GitHub
- URL: https://github.com/abouolia/sticky-sidebar
- Owner: abouolia
- License: mit
- Created: 2017-05-10T17:06:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-03T03:29:29.000Z (11 months ago)
- Last Synced: 2025-05-09T03:39:40.137Z (about 1 month ago)
- Topics: bower, javascript, jquery, jquery-plugin, performance-sticky-sidebars, scrolling, sticky-sidebar
- Language: JavaScript
- Homepage: https://abouolia.github.io/sticky-sidebar/
- Size: 256 KB
- Stars: 2,237
- Watchers: 43
- Forks: 482
- Open Issues: 76
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Sticky Sidebar [](https://travis-ci.org/abouolia/sticky-sidebar)
Pure JavaScript plugin for making smart and high performance sticky sidebars.
[Basic Example](https://abouolia.github.io/sticky-sidebar/examples/basic.html)
[Scrollable Sticky Element](https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html)
For complete documentation and examples see [abouolia.github.com/sticky-sidebar](http://abouolia.github.com/sticky-sidebar)
## 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 jQuery plugin from Bowser, NPM or just simply download it from this page and link to the ``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 similar 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
var sidebar = new StickySidebar('.sidebar', {
topSpacing: 20,
bottomSpacing: 20,
containerSelector: '.main-content',
innerWrapperSelector: '.sidebar__inner'
});
````
#### 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
$('#sidebar').stickySidebar({
topSpacing: 60,
bottomSpacing: 60
});
````
Make sure to include ``sticky-sidebar.js`` script file after ``jquery.js``.
## Usage with [ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js)
Sticky 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 `` and enable `resizeSensor` option (enabled by default) and it will works.
You can choose not to include `ResizeSensor.js` and sticky sidebar will continue work without any problem but without automatically detect resize changes.
## Browser Support
Sticky sidebar works in all modern browsers including Internet Explorer 9 and above, but if you want it to work with IE9, should include [`requestAnimationFrame`](https://gist.github.com/paulirish/1579671) polyfill before sticky sidebar code.
If you have any issues with browser compatibility don’t hesitate to [Submit an issue](https://github.com/abouolia/sticky-sidebar/issues/new).
## License
Sticky Sidebar is released under the MIT license. Have at it.
-------
Made by Ahmed Bouhuolia