function App() { // 5️⃣ Event handlers for "un/stuck" events // "type" is either "stuck" or "unstuck" // while the "target" is the DOM element, on which the un/stuck event happened. // Use this to make changes to the style or do any manipulations you want to do const handleChange = ({ target, type }) => { if (type === "stuck") { target.style.backgroundColor = "#4caf50"; target.style.boxShadow = "0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4)"; } else { target.style.backgroundColor = "rebeccapurple"; target.style.boxShadow = ""; } }; // Or handle each change individually const handleStuck = target => { // target.style.backgroundColor = '#4caf50' // target.style.boxShadow = // '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4)' }; const handleUnstuck = target => { // target.style.backgroundColor = 'rebeccapurple' // target.style.boxShadow = '' }; const stickySectionElements = Array.from({ length: 3 }, (_, i) => i + 1).map( key => ( // 2️⃣ Specify the boundary, in which sticky component should be placed under. <StickyBoundary key={key} 3️⃣ Here, you can observe the un/stuck events. "onChange" occurs for both "un/stuck" events. onStuck={handleStuck} onUnstuck={handleUnstuck} onChange={handleChange} > 4️⃣ Make this element "sticky" and render it as <h1 /> (default is <div />) <Sticky id={key} as="h1"> Sticky Header {key} </Sticky> <h3>{key} -- Some content under the sticky header</h3> <article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ... </article> </StickyBoundary> ) ); return ( <div className="App"> 1️⃣ Specify the Viewport to observe and render it as <main /> (defualt is <div />) <StickyViewport as="main"> {stickySectionElements} </StickyViewport> </div> ); }