{"id":13607975,"url":"https://github.com/abouolia/sticky-sidebar","last_synced_at":"2025-05-14T05:00:30.400Z","repository":{"id":40606107,"uuid":"90888864","full_name":"abouolia/sticky-sidebar","owner":"abouolia","description":"😎  Pure JavaScript tool for making smart and high performance sticky sidebar. ","archived":false,"fork":false,"pushed_at":"2024-08-03T03:29:29.000Z","size":262,"stargazers_count":2237,"open_issues_count":76,"forks_count":482,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-05-09T03:39:40.137Z","etag":null,"topics":["bower","javascript","jquery","jquery-plugin","performance-sticky-sidebars","scrolling","sticky-sidebar"],"latest_commit_sha":null,"homepage":"https://abouolia.github.io/sticky-sidebar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abouolia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-10T17:06:24.000Z","updated_at":"2025-05-08T20:50:51.000Z","dependencies_parsed_at":"2024-01-16T23:30:23.279Z","dependency_job_id":"d7f47cf1-d56a-4a42-93da-947a06505022","html_url":"https://github.com/abouolia/sticky-sidebar","commit_stats":{"total_commits":105,"total_committers":9,"mean_commits":"11.666666666666666","dds":0.4,"last_synced_commit":"bcd40bbf95e84b75916bc3535d7475447f9383f8"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abouolia%2Fsticky-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abouolia%2Fsticky-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abouolia%2Fsticky-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abouolia%2Fsticky-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abouolia","download_url":"https://codeload.github.com/abouolia/sticky-sidebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076330,"owners_count":22010597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bower","javascript","jquery","jquery-plugin","performance-sticky-sidebars","scrolling","sticky-sidebar"],"created_at":"2024-08-01T19:01:23.289Z","updated_at":"2025-05-14T05:00:30.330Z","avatar_url":"https://github.com/abouolia.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Sticky Sidebar [![Build Status](https://travis-ci.org/abouolia/sticky-sidebar.svg?branch=3.2.0)](https://travis-ci.org/abouolia/sticky-sidebar)\n\nPure JavaScript plugin for making smart and high performance sticky sidebars.\n\n[Basic Example](https://abouolia.github.io/sticky-sidebar/examples/basic.html)\n\n[Scrollable Sticky Element](https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html)\n\nFor complete documentation and examples see [abouolia.github.com/sticky-sidebar](http://abouolia.github.com/sticky-sidebar)\n\n## Why is sticky sidebar so awesome?\n\n* It does not re-calculate all dimensions when scrolling, just necessary dimensions.\n* Super smooth without incurring scroll lag or jank and no page reflows.\n* Integrated with resize sensor to re-calculate all dimenstions of the plugin when size of sidebar or its container is changed.\n* It has event trigger on each affix type to hook your code under particular situation.\n* Handle the sidebar when is tall or too short compared to the rest of the container.\n* Zero dependencies and super simple to setup.\n\n## Install\n\nYou 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.\n\n#### Bower\n\nIf you are using bower as package manager:\n\n````\nbower install sticky-sidebar\n````\n\n#### NPM\n\nIf you are using NPM as package manager:\n\n````\nnpm install sticky-sidebar\n````\n\n## Usage\n\nYour website's html structure has to be similar to this in order to work:\n\n````html\n\u003cdiv class=\"main-content\"\u003e\n    \u003cdiv class=\"sidebar\"\u003e\n        \u003cdiv class=\"sidebar__inner\"\u003e\n            \u003c!-- Content goes here --\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"content\"\u003e\n        \u003c!-- Content goes here --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n````\n\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.\n\nFor the above example, you can use the following JavaScript:\n\n````html\n\u003cscript type=\"text/javascript\" src=\"./js/sticky-sidebar.js\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  var sidebar = new StickySidebar('.sidebar', {\n    topSpacing: 20,\n    bottomSpacing: 20,\n    containerSelector: '.main-content',\n    innerWrapperSelector: '.sidebar__inner'\n  });\n\u003c/script\u003e\n````\n\n#### Via jQuery/Zepto\n\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.\n\n````html\n\u003cscript type=\"text/javascript\" src=\"./js/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"./js/jquery.sticky-sidebar.js\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  $('#sidebar').stickySidebar({\n    topSpacing: 60,\n    bottomSpacing: 60\n  });\n\u003c/script\u003e\n````\n\nMake sure to include ``sticky-sidebar.js`` script file after ``jquery.js``.\n\n## Usage with [ResizeSensor.js](https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js)\n\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 `\u003cscript\u003e` and enable `resizeSensor` option (enabled by default) and it will works.\n\nYou can choose not to include `ResizeSensor.js` and sticky sidebar will continue work without any problem but without automatically detect resize changes.\n\n## Browser Support\n\nSticky 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.\n\nIf you have any issues with browser compatibility don’t hesitate to [Submit an issue](https://github.com/abouolia/sticky-sidebar/issues/new).\n\n## License\n\nSticky Sidebar is released under the MIT license. Have at it.\n\n-------\n\nMade by Ahmed Bouhuolia\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabouolia%2Fsticky-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabouolia%2Fsticky-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabouolia%2Fsticky-sidebar/lists"}