{"id":13406559,"url":"https://github.com/digitalfabrik/react-sticky-headroom","last_synced_at":"2025-07-01T07:10:53.330Z","repository":{"id":42992584,"uuid":"155458354","full_name":"digitalfabrik/react-sticky-headroom","owner":"digitalfabrik","description":"A React Component to hide a Header using CSS sticky position ","archived":false,"fork":false,"pushed_at":"2025-06-11T13:52:10.000Z","size":9305,"stargazers_count":33,"open_issues_count":2,"forks_count":5,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-06-30T13:16:53.746Z","etag":null,"topics":["header","react","scrolling","sticky","styled-components"],"latest_commit_sha":null,"homepage":"","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/digitalfabrik.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,"zenodo":null}},"created_at":"2018-10-30T21:26:03.000Z","updated_at":"2025-06-11T13:51:45.000Z","dependencies_parsed_at":"2023-12-22T09:36:45.322Z","dependency_job_id":"2f827759-cd1c-466b-89fe-a066a401d5ea","html_url":"https://github.com/digitalfabrik/react-sticky-headroom","commit_stats":null,"previous_names":["integreat/react-sticky-headroom","integreat/sticky-headroom"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/digitalfabrik/react-sticky-headroom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalfabrik%2Freact-sticky-headroom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalfabrik%2Freact-sticky-headroom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalfabrik%2Freact-sticky-headroom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalfabrik%2Freact-sticky-headroom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitalfabrik","download_url":"https://codeload.github.com/digitalfabrik/react-sticky-headroom/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalfabrik%2Freact-sticky-headroom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262916694,"owners_count":23383891,"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":["header","react","scrolling","sticky","styled-components"],"created_at":"2024-07-30T19:02:33.589Z","updated_at":"2025-07-01T07:10:53.322Z","avatar_url":"https://github.com/digitalfabrik.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","JavaScript"],"sub_categories":[],"readme":"# ReactStickyHeadroom\n\n[![npm badge](https://img.shields.io/npm/v/@integreat-app/react-sticky-headroom.svg)](https://www.npmjs.com/package/@integreat-app/react-sticky-headroom)\n\nReactStickyHeadroom is a React component, that hides your header when you scroll down and shows it\nonce you're scrolling up again.\nIt's designed for best performance and can only be used if you know the height of your header\ncomponent (or more precisely the amount of pixels you want ReactStickyHeadroom to hide).\nThis helps us avoid calculating the height ourselves and therefore browsers don't need to perform\nheavy Recalculate-Style-Phases.\nFor more information read [here](https://developers.google.com/web/fundamentals/performance/rendering/).\n\nSince it's using [emotion](https://emotion.sh) internally, it's best to\nuse it in apps where you already have emotion in place.\n\nThe component is inspired by [react-headroom](https://kyleamathews.github.io/react-headroom/).\n\n## Usage\n\nA basic usage example:\n\n```jsx\nrender () {\n  return \u003cStickyHeadroom scrollHeight={100}\u003e\n    \u003cdiv style={{height: '100px', backgroundColor: 'red'}}\u003eMyHeader\u003c/div\u003e\n  \u003c/StickyHeadroom\u003e\n}\n```\n\n## Demo\n\nGo to [https://digitalfabrik.github.io/react-sticky-headroom/](https://digitalfabrik.github.io/react-sticky-headroom/) to view a demo:\n\n[![Demo](https://raw.githubusercontent.com/digitalfabrik/react-sticky-headroom/main/demo.gif)](https://digitalfabrik.github.io/react-sticky-headroom/)\n\n## API\n\nYou can pass the following props to ReactStickyHeadroom:\n\n- `children: React.Node` The header component, that should be hidden and revealed\n- `scrollHeight: number` The maximum amount of px the header should move up when scrolling\n- `pinStart: number` (Default: `0`) The minimum scrollTop position where the transform should start\n- `height?: number` (Optional) The height of the `children` node. Used for calculating the stickyTop position for a sticky ancestor in `onStickyTopChanged`\n- `onStickyTopChanged?: (number) =\u003e void` Fired, when Headroom changes its state and `height` is provided. Passes the calculated stickyTop position of an ancestor node.\n- `positionStickyDisabled?: boolean` (Optional, Default: `false`) If true, the header will stay static (e.g. for edge 16 support)\n- `parent: ?HTMLElement` (Optional, Default: `document.documentElement`) The parent element firing the scroll event.\n- `zIndex: number` (Optional, Default: 1) The z-index used by the wrapper.\n- `className?: string` (Optional) A classname for applying custom styles to the wrapper. Use at your own risk.\n\n## Support\n\nThe component generally supports:\n\n- Internet Explorer 11\n- Edge \u003e= 16\n- Chrome \u003e= 41\n- Firefox \u003e= 40\n- Safari \u003e= 6.2\n\nHowever, if you want to support non-modern browsers, you are responsible for transpiling the code for your preferred target.\nThe distributed files on npm are transpiled for ES2020.\n\nFor hiding and revealing the header, the browser needs to support the css-property `position: sticky`.\nYou can read about the browser support for that on [caniuse.com](https://caniuse.com/#feat=css-sticky).\n'Partial-Support' is enough for ReactStickyHeadroom to work in most cases.\n\nSince version 2.x.x, ReactStickyHeadroom is written in TypeScript.\nSupport for FlowJS types were dropped in version 2.0.0.\n\nSince version 3.x.x, ReactStickyHeadroom uses @emotion/styled instead of styled-components.\n\nReactStickyHeadroom is a client-side library and hence does not support Server Side Rendering (SSR) a priori.\nFor NextJS you can find more information on how to embed this library [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).\n\nIf there are any problems, please don't hesitate to open an issue on GitHub.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalfabrik%2Freact-sticky-headroom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitalfabrik%2Freact-sticky-headroom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalfabrik%2Freact-sticky-headroom/lists"}