{"id":27935820,"url":"https://github.com/rt2zz/react-sticker","last_synced_at":"2025-07-01T14:34:00.103Z","repository":{"id":27812019,"uuid":"31301502","full_name":"rt2zz/react-sticker","owner":"rt2zz","description":"Colliding sticky headers","archived":false,"fork":false,"pushed_at":"2015-07-06T22:58:00.000Z","size":176,"stargazers_count":18,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T01:06:11.041Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/rt2zz.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}},"created_at":"2015-02-25T07:04:36.000Z","updated_at":"2017-06-03T20:28:18.000Z","dependencies_parsed_at":"2022-08-21T13:00:51.910Z","dependency_job_id":null,"html_url":"https://github.com/rt2zz/react-sticker","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-sticker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-sticker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-sticker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-sticker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rt2zz","download_url":"https://codeload.github.com/rt2zz/react-sticker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252831181,"owners_count":21810780,"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":"2025-05-07T06:50:47.444Z","updated_at":"2025-05-07T06:50:47.932Z","avatar_url":"https://github.com/rt2zz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Sticker\nCreates instagram style sticky headers that collide when one header scrolls into another.\n\nIf you need something like this, but this does not work out of the box for you, file an issue and I will work to add configuration options to support a wider set of use cases.\n\n**Note:** This does not follow idiomatic react. The primary goal of this project is to be performant during scrolling and clean to implement.\n\n**Example**  \n[react-sticker-example](https://github.com/rt2zz/react-sticker-example)\n\n### Usage\nCreate a parent \u003cSticker\u003e component and put your sticky headers inside of it.\n\n*general*  \n```js\n\u003cSticker useWindow={*boolean*}\u003e\n  ...\n  \u003cSticky\u003e...\u003c/Sticky\u003e\n\u003c/Sticker\u003e\n```\n\n*example*\n```js\nvar Sticker = require('react-sticker')\nvar Sticky = Sticker.Sticky\n\nvar jsx = (\n  \u003cSticker useWindow={true}\u003e \n    \u003cdiv\u003e\n      \u003cSticky\u003e\u003ch2\u003eFirst Sticky\u003c/h2\u003e\u003c/Sticky\u003e\n      \u003cdiv style={{height: 500}} \u003eContents\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cSticky\u003e\u003ch2\u003eSecond Sticky\u003c/h2\u003e\u003c/Sticky\u003e\n      \u003cdiv style={{height: 500}} \u003eContents\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cSticky\u003e\u003ch2\u003eThird Sticky\u003c/h2\u003e\u003c/Sticky\u003e\n      \u003cdiv style={{height: 500}} \u003eContents\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/Sticker\u003e\n)\n```\n\nWhen the Sticker container is scrolled such that the Sticky header reaches the top, the position of the Sticky element will be fixed (i.e. stuck) to the top of the screen.  When the top of the second header hits the first header it will begin to push the first header out of the way, and then become sticky itself.\n\nMultiple independent \u003cSticker\u003e components will work as siblings but not if nested.\n\n### Styling \u0026 Scrolling\nIf you set `useWindow={true}` react-sticker should work out of the box. Otherwise you will need to make your sticker container \"scrollable\" with css, e.g. `\u003cSticker style={{overflow: 'scroll', height: '100%'}}\u003e`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frt2zz%2Freact-sticker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frt2zz%2Freact-sticker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frt2zz%2Freact-sticker/lists"}