{"id":13403883,"url":"https://github.com/captivationsoftware/react-sticky","last_synced_at":"2025-05-13T23:08:18.381Z","repository":{"id":19748581,"uuid":"23005495","full_name":"captivationsoftware/react-sticky","owner":"captivationsoftware","description":"\u003cSticky /\u003e component for awesome React apps","archived":false,"fork":false,"pushed_at":"2023-01-03T16:38:17.000Z","size":9082,"stargazers_count":2640,"open_issues_count":67,"forks_count":382,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-10T00:14:52.371Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/captivationsoftware.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":"2014-08-15T22:52:12.000Z","updated_at":"2025-04-09T19:05:21.000Z","dependencies_parsed_at":"2023-01-13T20:33:39.278Z","dependency_job_id":null,"html_url":"https://github.com/captivationsoftware/react-sticky","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/captivationsoftware%2Freact-sticky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/captivationsoftware%2Freact-sticky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/captivationsoftware%2Freact-sticky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/captivationsoftware%2Freact-sticky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/captivationsoftware","download_url":"https://codeload.github.com/captivationsoftware/react-sticky/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131317,"owners_count":21052819,"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-07-30T19:01:35.854Z","updated_at":"2025-04-10T00:15:01.765Z","avatar_url":"https://github.com/captivationsoftware.png","language":"JavaScript","readme":"# react-sticky [![Build Status](https://travis-ci.org/captivationsoftware/react-sticky.svg?branch=master)](https://travis-ci.org/captivationsoftware/react-sticky)\n\nMake your React components sticky!\n\n#### Update No longer actively maintained:\t\n\nThe 6.0.3 release is the last release maintained. This means we will not be considering any PR's and/or responding to any issues until a new maintainer is identified. It is *highly* recommended that you begin transitioning to another sticky library to ensure better support and sustainability. This is obviously less than ideal - sorry for any inconvenience!\n\n#### Demos\n\n* [Basic](http://react-sticky.netlify.com/#/basic)\n* [Relative](http://react-sticky.netlify.com/#/relative)\n* [Stacked](http://react-sticky.netlify.com/#/stacked)\n\n#### Version 6.x Highlights\n\n* Completely redesigned to support sticky behavior via higher-order component, giving you ultimate control of implementation details\n* Features a minimal yet efficient API\n* Drops support for versions of React \u003c 15.3. If you are using an earlier version of React, continue to use the 5.x series\n\n#### CSS\nThere's a CSS alternative to `react-sticky`: the `position: sticky` feature. However it currently does not have [full browser support](https://caniuse.com/#feat=css-sticky), specifically a lack of IE11 support and some bugs with table elements. Before using `react-sticky`, check to see if the browser support and restrictions prevent you from using `position: sticky`, as CSS will always be faster and more durable than a JS implementation.\n```css\nposition: -webkit-sticky;\nposition: sticky;\ntop: 0;\n```\n\n## Installation\n\n```sh\nnpm install react-sticky\n```\n\n## Overview \u0026 Basic Example\n\nThe goal of `react-sticky` is make it easier for developers to build UIs that have sticky elements. Some examples include a sticky navbar, or a two-column layout where the left side sticks while the right side scrolls.\n\n`react-sticky` works by calculating the position of a `\u003cSticky\u003e` component relative to a `\u003cStickyContainer\u003e` component. If it would be outside the viewport, the styles required to affix it to the top of the screen are passed as an argument to a render callback, a function passed as a child.\n\n```js\n\u003cStickyContainer\u003e\n  \u003cSticky\u003e{({ style }) =\u003e \u003ch1 style={style}\u003eSticky element\u003c/h1\u003e}\u003c/Sticky\u003e\n\u003c/StickyContainer\u003e\n```\n\nThe majority of use cases will only need the style to pass to the DOM, but some other properties are passed for advanced use cases:\n\n* `style` _(object)_ - modifiable style attributes to optionally be passed to the element returned by this function. For many uses, this will be the only attribute needed.\n* `isSticky` _(boolean)_ - is the element sticky as a result of the current event?\n* `wasSticky` _(boolean)_ - was the element sticky prior to the current event?\n* `distanceFromTop` _(number)_ - number of pixels from the top of the `Sticky` to the nearest `StickyContainer`'s top\n* `distanceFromBottom` _(number)_ - number of pixels from the bottom of the `Sticky` to the nearest `StickyContainer`'s bottom\n* `calculatedHeight` _(number)_ - height of the element returned by this function\n\nThe `Sticky`'s child function will be called when events occur in the parent `StickyContainer`,\nand will serve as the callback to apply your own logic and customizations, with sane `style` attributes\nto get you up and running quickly.\n\n### Full Example\n\nHere's an example of all of those pieces together:\n\napp.js\n\n```js\nimport React from 'react';\nimport { StickyContainer, Sticky } from 'react-sticky';\n// ...\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cStickyContainer\u003e\n        {/* Other elements can be in between `StickyContainer` and `Sticky`,\n        but certain styles can break the positioning logic used. */}\n        \u003cSticky\u003e\n          {({\n            style,\n\n            // the following are also available but unused in this example\n            isSticky,\n            wasSticky,\n            distanceFromTop,\n            distanceFromBottom,\n            calculatedHeight\n          }) =\u003e (\n            \u003cheader style={style}\u003e\n              {/* ... */}\n            \u003c/header\u003e\n          )}\n        \u003c/Sticky\u003e\n        {/* ... */}\n      \u003c/StickyContainer\u003e\n    );\n  },\n};\n```\n\nWhen the \"stickiness\" becomes activated, the arguments to the sticky function\nare modified. Similarly, when deactivated, the arguments will update accordingly.\n\n### `\u003cStickyContainer /\u003e` Props\n\n`\u003cStickyContainer /\u003e` supports all valid `\u003cdiv /\u003e` props.\n\n### `\u003cSticky /\u003e` Props\n\n#### relative _(default: false)_\n\nSet `relative` to `true` if the `\u003cSticky /\u003e` element will be rendered within\nan overflowing `\u003cStickyContainer /\u003e` (e.g. `style={{ overflowY: 'auto' }}`) and you want\nthe `\u003cSticky /\u003e` behavior to react to events only within that container.\n\nWhen in `relative` mode, `window` events will not trigger sticky state changes. Only scrolling\nwithin the nearest `StickyContainer` can trigger sticky state changes.\n\n#### topOffset _(default: 0)_\n\nSticky state will be triggered when the top of the element is `topOffset` pixels from the top of the closest `\u003cStickyContainer /\u003e`. Positive numbers give the impression of a lazy sticky state, whereas negative numbers are more eager in their attachment.\n\napp.js\n\n```js\n\u003cStickyContainer\u003e\n  ...\n  \u003cSticky topOffset={80}\u003e\n    { props =\u003e (...) }\n  \u003c/Sticky\u003e\n  ...\n\u003c/StickyContainer\u003e\n```\n\nThe above would result in an element that becomes sticky once its top is greater than or equal to 80px away from the top of the `\u003cStickyContainer /\u003e`.\n\n#### bottomOffset _(default: 0)_\n\nSticky state will be triggered when the bottom of the element is `bottomOffset` pixels from the bottom of the closest `\u003cStickyContainer /\u003e`.\n\napp.js\n\n```js\n\u003cStickyContainer\u003e\n  ...\n  \u003cSticky bottomOffset={80}\u003e\n    { props =\u003e (...) }\n  \u003c/Sticky\u003e\n  ...\n\u003c/StickyContainer\u003e\n```\n\nThe above would result in an element that ceases to be sticky once its bottom is 80px away from the bottom of the `\u003cStickyContainer /\u003e`.\n\n#### disableCompensation _(default: false)_\n\nSet `disableCompensation` to `true` if you do not want your `\u003cSticky /\u003e` to apply padding to\na hidden placeholder `\u003cdiv /\u003e` to correct \"jumpiness\" as attachment changes from `position:fixed`\nand back.\n\napp.js\n\n```js\n\u003cStickyContainer\u003e\n  ...\n  \u003cSticky disableCompensation\u003e\n    { props =\u003e (...) }\n  \u003c/Sticky\u003e\n  ...\n\u003c/StickyContainer\u003e\n```\n\n#### disableHardwareAcceleration _(default: false)_\n\nWhen `disableHardwareAcceleration` is set to `true`, the `\u003cSticky /\u003e` element will not use hardware acceleration (e.g. `transform: translateZ(0)`). This setting is not recommended as it negatively impacts\nthe mobile experience, and can usually be avoided by improving the structure of your DOM.\n\napp.js\n\n```js\n\u003cStickyContainer\u003e\n  ...\n  \u003cSticky disableHardwareAcceleration\u003e\n    { props =\u003e (...) }\n  \u003c/Sticky\u003e\n  ...\n\u003c/StickyContainer\u003e\n```\n\n## FAQ\n\n### I get errors while using React.Fragments\nReact.Fragments does not correspond to an actual DOM node, so `react-sticky` can not calculate its position. Because of this, React.Fragments is not supported.\n","funding_links":[],"categories":["JavaScript","Uncategorized","Awesome React","UI Components","Documentation / Guides / Exercises / Boilerplates","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","React"],"sub_categories":["Uncategorized","Tools","Sticky","Typescript / Javascript","React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptivationsoftware%2Freact-sticky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptivationsoftware%2Freact-sticky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptivationsoftware%2Freact-sticky/lists"}