react-sticky

library6.0.3jsnpmunverified

`react-sticky` is a JavaScript library designed to implement sticky UI elements within React applications. It provides a robust, programmatically controlled solution for scenarios where native CSS `position: sticky` falls short, particularly regarding older browser support (like IE11) or specific layout complexities (e.g., table elements). The current stable version, 6.0.3, was a significant redesign, transitioning to a higher-order component (HOC) pattern combined with a render prop API, which offers developers fine-grained control over the sticky behavior. It requires `react` and `react-dom` versions 15.3 or higher. While no explicit release cadence is stated, major version updates have historically aligned with significant React ecosystem changes. Its key differentiator is providing a flexible, JavaScript-driven approach when CSS alternatives are not viable, allowing custom logic and rendering based on the element's sticky state. This approach provides a fallback for environments where modern CSS features are not fully supported or when more dynamic, JavaScript-controlled sticky behavior is required beyond what pure CSS offers.

web-framework

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Container component for sticky elements. Use ES Module syntax for modern React projects.

import { StickyContainer } from 'react-sticky'

The component that becomes sticky. Its child must be a render prop function.

import { Sticky } from 'react-sticky'

The `Sticky` component's child must be a function (render prop) that receives properties like `style` and `isSticky` to control the rendered element.

<Sticky>{({ style, isSticky }) => <div style={style}>...</div>}</Sticky>

Demonstrates how to wrap content in `StickyContainer` and make an inner element sticky using a render prop, showing visual feedback when the element becomes sticky as the user scrolls.

import React from 'react'; import { StickyContainer, Sticky } from 'react-sticky'; class App extends React.Component { render() { // Mimic some scrollable content to demonstrate stickiness const content = Array.from({ length: 50 }, (_, i) => ( <p key={i} style={{ padding: '10px 0', borderBottom: '1px solid #eee' }}> Scrollable content item {i + 1} </p> )); return ( <div style={{ height: '1500px' }}> {/* Ensure enough height for scrolling */} <StickyContainer> <div style={{ padding: '20px', background: '#f0f0f0' }}> <h2>Above Sticky Section</h2> <p>This content is before the sticky element.</p> </div> <Sticky> {({ style, isSticky }) => ( <header style={{ ...style, background: isSticky ? 'lightblue' : 'lightgray', padding: '10px', textAlign: 'center', fontWeight: 'bold', boxShadow: isSticky ? '0 2px 5px rgba(0,0,0,0.2)' : 'none' }} > {isSticky ? 'I am Sticky!' : 'Scroll down to make me sticky!'} </header> )} </Sticky> <div style={{ padding: '20px' }}> <h3>Below Sticky Section</h3> <p>This content is below the sticky element and will scroll underneath it.</p> {content} </div> </StickyContainer> </div> ); } } export default App;

Debug

Known footguns

breaking`react-sticky` version 6.x dropped support for React versions older than 15.3. If you are using an earlier React version, you must use the 5.x series.

gotchaThe `Sticky` component requires a function as its direct child (a render prop). Providing a plain React element will result in an error or incorrect behavior.

gotchaCSS `position: sticky` is often a simpler and more performant solution if browser support (especially IE11) and specific layout requirements allow it. Evaluate CSS alternatives before opting for a JavaScript solution.

gotchaCertain CSS styles (e.g., `overflow: hidden`, `position: absolute`, `transform`) on parent elements or between `StickyContainer` and `Sticky` can interfere with the positioning logic and prevent sticky behavior.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

githubhttps://github.com/captivationsoftware/react-sticky ↗

packagehttps://www.npmjs.com/package/react-sticky ↗