{"id":13548561,"url":"https://github.com/WeCodePixels/theia-sticky-sidebar","last_synced_at":"2025-04-02T21:31:50.856Z","repository":{"id":15648636,"uuid":"18385861","full_name":"WeCodePixels/theia-sticky-sidebar","owner":"WeCodePixels","description":"Glues your website's sidebars, making them permanently visible while scrolling.","archived":false,"fork":false,"pushed_at":"2024-07-24T16:52:15.000Z","size":1259,"stargazers_count":570,"open_issues_count":20,"forks_count":209,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-10-10T12:39:39.347Z","etag":null,"topics":["javascript","scrolling","sidebar","sidebar-height","ux","website-sidebars"],"latest_commit_sha":null,"homepage":"","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/WeCodePixels.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2014-04-03T00:13:37.000Z","updated_at":"2024-10-01T07:03:35.000Z","dependencies_parsed_at":"2024-07-24T19:18:34.490Z","dependency_job_id":null,"html_url":"https://github.com/WeCodePixels/theia-sticky-sidebar","commit_stats":{"total_commits":58,"total_committers":10,"mean_commits":5.8,"dds":"0.18965517241379315","last_synced_commit":"584d858b9a5203a9c1f3fd024be510436cfa3e62"},"previous_names":["liviucmg/theia-sticky-sidebar"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeCodePixels%2Ftheia-sticky-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeCodePixels%2Ftheia-sticky-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeCodePixels%2Ftheia-sticky-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeCodePixels%2Ftheia-sticky-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WeCodePixels","download_url":"https://codeload.github.com/WeCodePixels/theia-sticky-sidebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222879137,"owners_count":17051875,"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":["javascript","scrolling","sidebar","sidebar-height","ux","website-sidebars"],"created_at":"2024-08-01T12:01:11.862Z","updated_at":"2024-11-03T17:31:44.139Z","avatar_url":"https://github.com/WeCodePixels.png","language":"JavaScript","readme":"# Theia Sticky Sidebar\n\nA JavaScript library that glues your website's sidebars (or any vertical column for that matter), making them permanently visible when scrolling up and down. Useful when a sidebar is too tall or too short compared to the rest of the content. Works with virtually any design and supports multiple sidebars.\n\n## WordPress\n\n[![Theia Sticky Sidebar for WordPress](https://github.com/liviucmg/theia-sticky-sidebar/blob/master/assets/theia-sticky-sidebar-for-wordpress-banner.png)](https://wecodepixels.com/shop/theia-sticky-sidebar-for-wordpress/)\n\nAlso available as a [premium WordPress plugin](https://wecodepixels.com/shop/theia-sticky-sidebar-for-wordpress/) that comes with a user-friendly admin panel and supports a plethora of themes out-of-the-box.\n\n## Examples\n\n[3 columns example](http://theia-sticky-sidebar.wecodepixels.com/examples/3-columns.html)\n\n[4 columns example](http://theia-sticky-sidebar.wecodepixels.com/examples/4-columns.html)\n\n[Bootstrap 4 example](http://theia-sticky-sidebar.wecodepixels.com/examples/bootstrap-v4.html)\n\n[Foundation example](http://theia-sticky-sidebar.wecodepixels.com/examples/foundation.html)\n\n## Install\n\n### Bower\n\nIf you are using Bower as your package manager:\n\n```bash\nbower install theia-sticky-sidebar\n```\n\n### NPM\n\nIf you are using NPM as your package manager:\n\n```bash\nnpm install theia-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=\"wrapper\"\u003e\n  \u003cdiv class=\"content\"\u003e\n    \u003cdiv class=\"theiaStickySidebar\"\u003e\n    ...\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"sidebar\"\u003e\n    \u003cdiv class=\"theiaStickySidebar\"\u003e\n    ...\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nNote that the inner \"theiaStickySidebar\" divs are optional, but highly recommended.\nIf you don't supply them yourself, the script will create them for you, but this can be problematic\nif you're using ads or iframes, since they will be moved around in the DOM and as a result will get reloaded.\n\n**Note:** Make sure to use `\u003c!DOCTYPE html\u003e` in your page, otherwise you might run into weird issues.\n\nFor the above example, you can use the following JavaScript:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"http://code.jquery.com/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"dist/ResizeSensor.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"dist/theia-sticky-sidebar.min.js\"\u003e\u003c/script\u003e\n\t\t\n\u003cscript type=\"text/javascript\"\u003e\n  jQuery(document).ready(function() {\n    jQuery('.content, .sidebar').theiaStickySidebar({\n      // Settings\n      additionalMarginTop: 30\n    });\n  });\n\u003c/script\u003e\n```\n\n### ResizeSensor\n\nTheia Sticky Sidebar uses the [CSS Element Queries](https://github.com/marcj/css-element-queries) library to detect when your sidebars change height, so that it can recalculate their positions. This can happen if you are using an [accordion](http://v4-alpha.getbootstrap.com/components/collapse/#accordion-example), for example.\n\nYou can choose **not** to include the `ResizeSensor.min.js` script in your page, in which case Theia Sticky Sidebar will continue to function (possibly even a bit smoother) but will not automatically detect height changes.\n\n## Settings\n\n### containerSelector\n\nThe sidebar's container element. If not specified, it defaults to the sidebar's parent.\n\n### additionalMarginTop\n\nAn additional top margin in pixels. Defaults to **0**.\n\n### additionalMarginBottom\n\nAn additional bottom margin in pixels. Defaults to **0**.\n\n### updateSidebarHeight\n\nUpdates the sidebar's height. Use this if the background isn't showing properly, for example. Defaults to **true**.\n\n### minWidth\n\nThe sidebar returns to normal if its width is below this value. Useful for responsive designs. Defaults to **0**.\n\n### disableOnResponsiveLayouts\n\nTry to detect responsive layouts automatically and disable the sticky functionality on smaller screens. More exactly, it detects when the container and the sidebar are moved one on top of the other, instead of showing up side-by-side. Defaults to **true**.\n\n### defaultPosition\n\nThe sidebar must have a non-static `position`, as the inner sticky-sidebar uses `position: absolute`. Defaults to **relative**.\n\n### namespace\n\nEvents are binded using a namespace, so that you may unbind them later on without affecting others. Defaults to **TSS**.\n\n## Credits\n\nStock photos courtesy of [Unsplash.com](https://unsplash.com/)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWeCodePixels%2Ftheia-sticky-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWeCodePixels%2Ftheia-sticky-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWeCodePixels%2Ftheia-sticky-sidebar/lists"}