{"id":20069858,"url":"https://github.com/garthenweb/react-stickup","last_synced_at":"2025-10-05T00:45:41.709Z","repository":{"id":32922124,"uuid":"146357185","full_name":"garthenweb/react-stickup","owner":"garthenweb","description":"React components to stick elements at the top of the page while scrolling","archived":false,"fork":false,"pushed_at":"2024-08-19T07:59:48.000Z","size":4718,"stargazers_count":24,"open_issues_count":19,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-07T12:19:45.195Z","etag":null,"topics":["component","header","react","scroll","sticky"],"latest_commit_sha":null,"homepage":"http://garthenweb.github.io/react-stickup","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/garthenweb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-27T21:37:23.000Z","updated_at":"2024-02-25T20:59:32.000Z","dependencies_parsed_at":"2024-10-03T21:10:49.079Z","dependency_job_id":"5056af6f-5768-4300-a7cc-01f514af6d77","html_url":"https://github.com/garthenweb/react-stickup","commit_stats":{"total_commits":175,"total_committers":4,"mean_commits":43.75,"dds":0.2114285714285714,"last_synced_commit":"fea9f828ef717cdd49f62aeebc0b45005713e031"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/garthenweb/react-stickup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garthenweb%2Freact-stickup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garthenweb%2Freact-stickup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garthenweb%2Freact-stickup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garthenweb%2Freact-stickup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garthenweb","download_url":"https://codeload.github.com/garthenweb/react-stickup/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garthenweb%2Freact-stickup/sbom","scorecard":{"id":419234,"data":{"date":"2025-08-11","repo":{"name":"github.com/garthenweb/react-stickup","commit":"fea9f828ef717cdd49f62aeebc0b45005713e031"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/27 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"56 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T00:44:43.216Z","repository_id":32922124,"created_at":"2025-08-19T00:44:43.216Z","updated_at":"2025-08-19T00:44:43.216Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278395916,"owners_count":25979691,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","header","react","scroll","sticky"],"created_at":"2024-11-13T14:16:22.385Z","updated_at":"2025-10-05T00:45:41.665Z","avatar_url":"https://github.com/garthenweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Stickup\n\nReact components to stick elements at the top of the page while scrolling.\n\n![](https://img.shields.io/npm/l/react-stickup.svg)\n[![](https://img.shields.io/npm/v/react-stickup.svg)](https://www.npmjs.com/package/react-stickup)\n![](https://img.shields.io/david/garthenweb/react-stickup.svg)\n[![](https://img.shields.io/bundlephobia/minzip/react-stickup.svg)](https://bundlephobia.com/result?p=react-stickup)\n[![Build Status](https://travis-ci.org/garthenweb/react-stickup.svg?branch=master)](https://travis-ci.org/garthenweb/react-stickup)\n\n## Features\n\n* [`Sticky`](#sticky) component like `position: sticky` with options for elements bigger than the viewport\n* [`StickyScrollUp`](#stickyscrollup) component that is only visible when scrolling up (like the Chrome Browser url bar on Android)\n* Support for modern browsers (including IE11)\n* Build with performance in mind: Blazing fast, even on low end devices\n* Typescript\n\n[See the example to see how the library will work in production.](http://garthenweb.github.io/react-stickup)\n\n## Installation\n\n```\nnpm install --save react-stickup\n```\n\n## Requirements\n\n* [react](https://reactjs.org/) version `16.3` or higher\n\n## Static Types\n\n* Support for [Typescript](https://www.typescriptlang.org/) is included within this library, no need to install additional packages\n* [Flow](https://flow.org/en/) is not supported (feel free to create a PR)\n\n## Client Support\n\nThis library aims to support the following clients\n\n* Chrome/ Chrome Android (latest)\n* Firefox (latest)\n* Edge (latest)\n* Safari/ Safari iOS (latest)\n* NodeJS (latest)\n* Internet Explorer 11 (with @babel/polyfill)\n\nPlease fill an issue in case your client is not supported or you see an issue in one of the above.\n\n## Usage\n\n### StickyProvider\n\nThis component is required as a parent for `Sticky` and `StickyScrollUp` component to work. It will take care of registration of event handlers and provides a communication channel between components. The main implementation is based on [react-viewport-utils](https://github.com/garthenweb/react-viewport-utils).\n\n### Sticky\n\nActs like `position: sticky` css property.\nBy default the component will be sticky when the top offset is reached and will stay that way. In case it should only stick within a certain container it can get assigned as a reference.\n\n**Important**: To work properly the `Sticky` component must have a `StickyProvider` as a parent within its tree.\n\n#### Example\n\n``` javascript\nimport * as React from 'react';\nimport { Sticky } from 'react-stickup';\n\nconst container = React.createRef();\n\nrender(\n  \u003cStickyProvider\u003e\n    \u003cdiv ref={container}\u003e\n      \u003cSticky container={container}\u003e\n        \u003cHeader\u003eMy Header\u003c/Header\u003e\n      \u003c/Sticky\u003e\n      \u003cdiv style={{ height: '5000px' }}\u003e\n        Lots of content\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cSticky\u003e\n      \u003cHeader\u003eMy Header\u003c/Header\u003e\n    \u003c/Sticky\u003e\n  \u003c/StickyProvider\u003e,\n  document.querySelector('main')\n);\n```\n\n#### Properties\n\n**`children?: React.ReactNode | ((options: { isSticky: boolean, isDockedToBottom: boolean, isNearToViewport: boolean, appliedOverflowScroll: 'end' | 'flow' }) =\u003e React.ReactNode)`**\n\nThe child node that is rendered within the sticky container. When rendered as a function it will add further information the the function which can be used e.g. to update stylings.\n\n**`container?: React.RefObject\u003cany\u003e`**\n\nThe reference to the container to stick into. If this is not set, the component will be sticky regardless how far the user scrolls down.\n\n**`defaultOffsetTop?: number`**\n\nA top offset to create a padding between the browser window and the sticky component when sticky.\n\n**`overflowScroll?: 'end' | 'flow'`**\n\nDefines how the sticky element should react in case its bigger than the viewport.\nDifferent options are available:\n\n* `end`: The default value will keep the component sticky as long as it reaches the bottom of its container and only then will scroll down.\n* `flow`: The element scrolls with the flow of the scroll direction, therefore the content is easier to access.\n\n**`disabled?: boolean`**\n\nAllows to disable all sticky behavior. Use this in case you need to temporary disable the sticky behavior but you don't want to unmount it for performance reasons.\n\n**`disableHardwareAcceleration?: boolean`**\n\nBy default css styles for hardware acceleration (`will-change` if supported, otherwise falls back to `transform`) are activated. This allows to turn it off.\n\n**`disableResizing?: boolean`**\n\nThe components will resize when the width of the window changes to adjust its height and width. This allows to turn the resizing off.\n\n**`stickyProps?: {}`**\n\nAll properties within this object are spread directly into the sticky element within the component. This e.g. allows to add css styles by `className` or `style`.\n\n**`style?: React.CSSProperties`**\n\nWill be merged with generated styles of the placeholder element. It also allows to override generated styles.\n\n**`className?: string`**\n\nThe class name is passed directly to the placeholder element.\n\n### StickyScrollUp\n\nOnly Sticky to the top of the page in case it the page is scrolled up. When scrolled down, the content will just scroll out. `Sticky` next to the `StickyScrollUp` will stick to the bottom of it and will therefore not overlap.\n\n**Important**: To work properly the `StickyScrollUp` component must have a `StickyProvider` as a parent within its tree. All `Sticky` components must be wrapped by the same instance of the `StickyProvider`as the `StickyScrollUp` component to not overlap.\n\n#### Example\n\n``` javascript\nimport * as React from 'react';\nimport { Sticky, StickyScrollUp, StickyProvider } from 'react-stickup';\n\nconst container = React.createRef();\n\nrender(\n  \u003cStickyProvider\u003e\n    \u003cStickyScrollUp\u003e\n      My Stick up container\n    \u003c/StickyScrollUp\u003e\n    \u003cdiv ref={container}\u003e\n      \u003cSticky container={container}\u003e\n        \u003cHeader\u003eMy Header\u003c/Header\u003e\n      \u003c/Sticky\u003e\n      \u003cdiv style={{ height: '5000px' }}\u003e\n        Lots of content\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/StickyProvider\u003e,\n  document.querySelector('main')\n);\n```\n\n#### Properties\n\n**`children?: React.ReactNode | ((options: { isSticky: boolean, isNearToViewport: boolean }) =\u003e React.ReactNode)`**\n\nThe child node that is rendered within the sticky container. When rendered as a function it will add further information the the function which can be used e.g. to update stylings.\n\n**`disabled?: boolean`**\n\nAllows to disable all sticky behavior. Use this in case you need to temporary disable the sticky behavior but you don't want to unmount it for performance reasons.\n\n**`disableHardwareAcceleration?: boolean`**\n\nBy default css styles for hardware acceleration (`will-change` if supported, otherwise falls back to `transform`) are activated. This allows to turn it off.\n\n**`disableResizing?: boolean`**\n\nThe components will resize when the width of the window changes to adjust its height and width. This allows to turn the resizing off.\n\n**`stickyProps?: {}`**\n\nAll properties within this object are spread directly into the sticky element within the component. This e.g. allows to add css styles by `className` or `style`.\n\n**`style?: React.CSSProperties`**\n\nWill be merged with generated styles of the placeholder element. It also allows to override generated styles.\n\n**`className?: string`**\n\nThe class name is passed directly to the placeholder element.\n\n**`defaultOffsetTop?: number`**\n\nDEPRECATED: If not set, the start position is now calculated by default as it was already the case for the `Sticky` component. As there is no use case for this property anymore it will be removed in the future.\n\nWhen not initialized as the first element within the page (directly at the top) this allows to set an offset by hand from where the component will be sticky.\n\n## Contributing\n\nContributions are highly appreciated! The easiest is to fill an issue in case there is one before providing a PR so we can discuss the issue and a possible solution up front.\n\nAt the moment there is not a test suite because its tricky to test the sticky behavior automated. I consider creating some e2e tests with Cypress in the future. In case you are interested in helping on that, please let me know!\n\nFor now, please make sure to add a test case for all features in the examples.\n\nTo start the example with the recent library changes just run `npm start` on the command.\n\n## License\n\nLicensed under the [MIT License](https://opensource.org/licenses/mit-license.php).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarthenweb%2Freact-stickup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarthenweb%2Freact-stickup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarthenweb%2Freact-stickup/lists"}