Sticky Spy

Detect when an element with position sticky being stuck

Sticky title Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni modi, aliquid qui repellat ipsum velit accusantium laudantium. Nisi, minus labore eligendi sint autem ipsum, doloribus accusantium vitae, praesentium aspernatur dolorum. Aliquid id magnam nisi sunt, aut doloribus. Consectetur vel maiores voluptas corporis pariatur facilis consequuntur eius voluptatem harum debitis animi amet similique, incidunt temporibus tempore cumque praesentium rerum dolorum excepturi? Neque repellendus et necessitatibus, corporis eligendi sed omnis aspernatur molestiae. Ratione vero corporis, vel hic amet harum doloribus, omnis ullam tempora et ex sed tempore libero explicabo dicta quisquam deserunt! Voluptatibus nostrum ipsam vitae assumenda eius laudantium sapiente, autem tempora libero neque impedit dolorem in enim praesentium, sequi consectetur repellendus nobis totam molestiae quam veritatis? Eum nam modi dolorem. Vero! Perferendis exercitationem, veritatis porro ex velit quo dolorum officia, vero neque, eligendi odio quos! Saepe quam animi sit odit, harum repellendus quis fugit sint natus facilis labore. Facilis, a eos? Commodi at dolore amet autem rerum unde obcaecati, eligendi voluptas, similique doloremque temporibus facere eveniet dolorem fugiat placeat reprehenderit iusto reiciendis. Rerum facilis maiores eaque accusantium illum aut unde fuga. Voluptas dolore commodi distinctio nemo velit. Architecto blanditiis rerum consequatur quod expedita placeat est nostrum ipsam officiis sint, cupiditate veniam, nulla eveniet suscipit culpa perspiciatis itaque corporis, facilis at mollitia.

View source

Anatomy

import { StickySpy } from "@lualtek/react-components";
 
export default () => {
  return (
    <div style={{ overflow: 'auto' }}>
      <StickySpy>
        <h1 style={{ position: 'sticky', top: 0 }}>Sticky title</h1>
      </StickySpy>
      ...
    <div>
  );
};

API Reference

export type StickySpyProps = {
  /**
   * Set a custom name for the attribute
   * @default "data-react-is-sticky"
   */
  attribute?: string;
 
  /**
   * Callback function that is called when the sticky element changes
   */
  onStickyChange?: (isSticky: boolean) => void;
 
  /**
   * Set the root element to observe. Must be a sticky element's ancestor.
   */
  root?: HTMLElement;
};

Meter