{"id":20942509,"url":"https://github.com/jfcere/ngx-stickybits","last_synced_at":"2025-05-13T23:33:04.235Z","repository":{"id":34291600,"uuid":"174731041","full_name":"jfcere/ngx-stickybits","owner":"jfcere","description":"Angular directive using Stickybits, a lightweight alternative to `position: sticky` polyfills","archived":false,"fork":false,"pushed_at":"2023-01-07T03:40:45.000Z","size":1467,"stargazers_count":14,"open_issues_count":30,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-27T19:48:08.368Z","etag":null,"topics":["angular","ngx","sticky","stickybits"],"latest_commit_sha":null,"homepage":"https://jfcere.github.io/ngx-stickybits","language":"TypeScript","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/jfcere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-09T18:27:07.000Z","updated_at":"2021-12-14T00:25:43.000Z","dependencies_parsed_at":"2023-01-15T06:00:45.618Z","dependency_job_id":null,"html_url":"https://github.com/jfcere/ngx-stickybits","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-stickybits","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-stickybits/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-stickybits/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-stickybits/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfcere","download_url":"https://codeload.github.com/jfcere/ngx-stickybits/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043218,"owners_count":22004912,"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":["angular","ngx","sticky","stickybits"],"created_at":"2024-11-18T23:27:52.604Z","updated_at":"2025-05-13T23:32:59.205Z","avatar_url":"https://github.com/jfcere.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-stickybits\n[![CircleCI](https://circleci.com/gh/jfcere/ngx-stickybits/tree/master.svg?style=shield)](https://circleci.com/gh/jfcere/ngx-stickybits/tree/master) [![version](https://img.shields.io/npm/v/ngx-stickybits.svg?style=flat)](https://www.npmjs.com/package/ngx-stickybits) [![npm](https://img.shields.io/npm/l/ngx-stickybits.svg)](https://opensource.org/licenses/MIT) [![dependencies Status](https://david-dm.org/jfcere/ngx-stickybits/status.svg?path=lib)](https://david-dm.org/jfcere/ngx-stickybits?path=lib) [![peerDependencies Status](https://david-dm.org/jfcere/ngx-stickybits/peer-status.svg?path=lib)](https://david-dm.org/jfcere/ngx-stickybits?path=lib\u0026type=peer) [![downloads](https://img.shields.io/npm/dt/ngx-stickybits.svg)](https://www.npmjs.com/package/ngx-stickybits)\n\nAngular sticky directive using [Stickybits](https://github.com/dollarshaveclub/stickybits), a lightweight alternative to `position: sticky` polyfills.\n\n\u003e :alarm_clock: The project is still a Work-In-Progress and may be subject to major changes.\n\n### Table of contents\n\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n- [Browser Compatibility](#browser-compatibility)\n- [Quirks](#quirks)\n- [Demo application](#demo-application)\n- [Road map](#road-map)\n- [Contribution](#contribution)\n\n## Installation\n\nTo add ngx-stickybits library to your `package.json` use the following command.\n\n```bash\nnpm install ngx-stickybits --save\n```\n\n## Configuration\n\nImport `StickybitsModule` to your angular module to be able to use `stickybits` directive.\n\n```diff\nimport { NgModule } from '@angular/core';\n+ import { StickybitsModule } from 'ngx-stickybits';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n+   StickybitsModule,\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule { }\n```\n\n## Usage\n\nngx-stickybits provides the `stickybits` directive to apply on element you want to be sticky.\n\n```html\n\u003cdiv class=\"some-stickybits-parent\"\u003e\n  \u003cdiv class=\"some-stickybits-element\" stickybits\u003e\n    I am a sticky element\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Input Properties\n\n`stickybits` directive can be customized using the following properties:\n\n| Property | Type | Default | Description |\n| -------- | ---- | ------- | ----------- |\n| @Input() \u003cbr/\u003e noStyles | boolean | `false` | To use StickyBits without inline styles except for `position: sticky` or `position: fixed` |\n| @Input() \u003cbr/\u003e scrollEl | Element \\| string | `window` | Desired scrolling element or DOM query selector |\n| @Input() \u003cbr/\u003e parentClass | string | 'sticky-parent' | Applied CSS class on the parent of the sticky element |\n| @Input() \u003cbr/\u003e stickyChangeClass | string | 'sticky--change' | Applied CSS class after the element is sticky for a certain duration of scroll - _By default this duration of scrolling is the height of the sticky element_ |\n| @Input() \u003cbr/\u003e stickyChangeNumber | number | _sticky element height_ | Scroll duration for when `.sticky--change` is added can be modified by providing a number for this option |\n| @Input() \u003cbr/\u003e stickyClass | string | 'sticky' | Applied CSS class on element when it is _sticky_ |\n| @Input() \u003cbr/\u003e stuckClass | string | 'stuck' | Applied CSS class on element when it is _stuck_ |\n| @Input() \u003cbr/\u003e stickyOffset | number | 0 | Desired offset from the top of the viewport to which the element will stick |\n| @Input() \u003cbr/\u003e useFixed | boolean | `false` | Enforce `position: fixed` instead of using `position: sticky` |\n| @Input() \u003cbr/\u003e useGetBoundingClientRect | boolean | `false` | Do not use `offsetTop` provide the optional boolean `useGetBoundingClientRect` - _This feature is optimal when dealing with things like CSS calc which can throw off `offsetTop` calculations_ |\n| @Input() \u003cbr/\u003e useStickyClasses | boolean | `true` | Add/remove classes from element according to it's sticky state (see details below) — _This is expensive for the browser, it is better if can be avoided and remain `false`_ |\n| @Input() \u003cbr/\u003e verticalPosition | 'top' \\| 'bottom' | 'top' | Stick element to the top/bottom of the viewport when vertically scrolled to |\n| @Output() \u003cbr/\u003e sticky | EventEmitter\\\u003cboolean\\\u003e | | Emits `true` when element becomes sticky and `false` when it becomes unsticky |\n| @Output() \u003cbr/\u003e stuck | EventEmitter\\\u003cboolean\\\u003e | | Emits `true` when element becomes stuck and `false` when it becomes unstuck |\n\n\u003e :warning: Right now events are only emitted when `useStickyClasses` is set to `true` as those are based on CSS class detection with `MutationObserver` which offers better browser compatibility then `IntersectionObserver` althought refactoring might be reconsidered in the future.\n\nWhen `useStickyClasses` is set to `true`, the following CSS classes will be applied on elements (can be can be overwritten):\n\n- `sticky` if the selected element is sticky\n- `stuck` if the selected element is stopped at the bottom of its parent\n- `sticky--change` if the selected element is scrolling within the height of the sticky element (before it get sticky)\n- `sticky-parent` so that styles can easily be added to the parent of a sticky element\n\n## Browser Compatibility\n\n`Stickybits` works in modern browsers like a charm, when it turns to Internet Explorer it is often a total different story! Althought it tend to support IE 9 and above by using `position: fixed` the result not always what is expected. Please file and issue with browser compatibility quirks [here](https://github.com/dollarshaveclub/stickybits/issues).\n\n## Quirks\n\nI won't lie to you, getting an element sticky has always been a hard and painful task! Although `Stickybits` makes it _easier_ it is not always magic and sometime require some twists to make it works as desired. This section is dedicated to quirks and how to resolve common problematic behaviors using `stickybits` directive.\n\n#### verticalPosition = 'bottom'\n\nSetting `[verticalPosition]=\"'bottom'\"` won't work out of the box, easiest way to fix it is to put the sticky parent element with `display: flex` and set the sticky element with `align-self: flex-end`.\n\n## Demo Application\n\nDemo application is available @ https://jfcere.github.io/ngx-stickybits and its source code can be found inside the `demo` directory.\n\nThe following commands will clone the repository, install npm dependencies and serve the application @ http://localhost:4200\n\n```bash\ngit clone https://github.com/jfcere/ngx-stickybits.git\nnpm install\nng serve\n```\n\n## Road map\n\nHere is the list of tasks that will be done on this library in a near future ...\n\n- ~~Publish demo on github pages~~\n- ~~Improve documentation~~\n- Add CircleCI integration\n- Add unit tests\n- Add Module configuration (CSS classes, useFixed, noStyles, ...)\n\n## Contribution\n\nContributions are always welcome, just make sure that ...\n\n- Your code style matches with the rest of the project\n- Unit tests pass\n- Linter passes\n\n## License\n\nI do not own rights for `Stickybits` and all the credits belong to them — see [DollarShaveClub/Stickybits](https://github.com/dollarshaveclub/stickybits) for details.\n\nThis package is licensed under [MIT](https://opensource.org/licenses/MIT) license — see [LICENSE](https://github.com/jfcere/ngx-stickybits/blob/master/LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-stickybits","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfcere%2Fngx-stickybits","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-stickybits/lists"}