{"id":14350132,"url":"https://github.com/matheo/ngx-sticky-kit","last_synced_at":"2026-02-08T07:02:21.799Z","repository":{"id":173823324,"uuid":"651349393","full_name":"matheo/ngx-sticky-kit","owner":"matheo","description":"Angular solution that allows to stick the elements such as header, menu, sidebar or any other block on the page.","archived":false,"fork":false,"pushed_at":"2024-01-05T05:42:41.000Z","size":399,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-11T15:16:16.322Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matheo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-06-09T03:48:33.000Z","updated_at":"2024-08-20T03:19:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5f91bdb-8211-443c-9272-571249c357fb","html_url":"https://github.com/matheo/ngx-sticky-kit","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"2158ee2c71f4c6b28904f3f0b0b2099f5201be61"},"previous_names":["matheo/ngx-sticky-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheo%2Fngx-sticky-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheo%2Fngx-sticky-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheo%2Fngx-sticky-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matheo%2Fngx-sticky-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matheo","download_url":"https://codeload.github.com/matheo/ngx-sticky-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246465224,"owners_count":20781919,"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":[],"created_at":"2024-08-27T04:00:38.354Z","updated_at":"2026-02-08T07:02:16.780Z","avatar_url":"https://github.com/matheo.png","language":"HTML","funding_links":[],"categories":["Recently Updated","Table of contents"],"sub_categories":["[Aug 26, 2024](/content/2024/08/26/README.md)","Third Party Components"],"readme":"# ngx-sticky-kit\n\nAngular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.\n\n## Installation\n\nInstall with npm:\n\n```bash\nnpm install ngx-sticky-kit --save\n```\n\nInitial development environment:\n\n```bash\nnpm install\nnpm run build\n```\n\nRun demo application:\n\n```bash\nnpm start\n```\n\n## Usage\n\n**[sticky]** - makes an element sticky\n\n    \u003csticky\u003eSticky element\u003c/sticky\u003e\n    \u003cdiv sticky\u003eSticky div\u003c/div\u003e\n    \n**[sticky-orientation]** : (_default \"none\"_) - orientation for sticky element (\"left\", \"right\", \"none\")\n\n**[sticky-zIndex]** : (_default 10_) - controls z-index CSS parameter of the sticky element\n\n    \u003csticky sticky-zIndex=\"999\"\u003eSticky element\u003c/sticky\u003e\n    \n**[sticky-width]** : (_default \"auto\"_) - width of the sticky element\n\n**[sticky-offset-top]** : (_default 0_) - pixels between the top of the page or container and the element\n\n**[sticky-offset-bottom]** : (_default 0_) - pixels between the bottom of the page or container and the element\n\n    \u003csticky sticky-offset-top=\"20\" sticky-offset-bottom=\"20\"\u003eSticky element\u003c/sticky\u003e\n    \n**[sticky-start]** : (_default 0_) - position where the element should start to stick\n\n    \u003csticky sticky-start=\"20\"\u003eSticky element\u003c/sticky\u003e\n    \n**[sticky-class]** : (_default \"sticky\"_) - CSS class that will be added after the element starts sticking\n   \n**[sticky-end-class]** : (_default \"sticky-end\"_) - CSS class that will be added to the sticky element after it ends sticking\n\n**[sticky-media-query]** : (_default \"\"_) - media query that allows to use sticky\n\n**[sticky-parent]** : (_default true_) - if true, then the sticky element will be stuck relatively to the parent containers. Otherwise, _window_ will be used as the parent container. \n\n\u003e NOTE: the \"position: relative\" styling is added to the parent element automatically in order to use the absolute positioning\n\n## Example\n\n```typescript\n// app.module.ts\nimport {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {StickyModule} from 'ngx-sticky-kit';\nimport {AppComponent} from './app.component';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        StickyModule\n    ],\n    declarations: [\n        AppComponent\n    ],\n    bootstrap: [\n        AppComponent\n    ]\n})\nexport class AppModule { }\n```\n\n```typescript\n// app.component.ts\nimport {Component} from '@angular/core';\n\n@Component({\n  selector: 'app',\n  template: '\u003csticky [sticky-offset-top]=\"20\"\u003e\u003cdiv\u003edemo\u003c/div\u003e\u003c/sticky\u003e',\n})\nexport class DemoComponent { }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheo%2Fngx-sticky-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatheo%2Fngx-sticky-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheo%2Fngx-sticky-kit/lists"}