Sticky - Usage - App.jsx

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>
  );
}