useSticky

Returns a boolean indicating whether referenced element is currently stuck to viewport or a custom container.

• @param ref - The element to monitor for stickiness.
• @param options - Configurable options
• @returns A boolean indicating whether the element is currently stuck.

Example

const ref = useRef<HTMLDivElement>(null)
const isSticky = useSticky(ref)
 
return (
  <div
    ref={ref}
    style={{
      position: 'sticky',
      marginTop: '25px',
      top: '50px',
      background: isSticky ? 'green' : 'crimson'
    }}
  >
    Content
  </div>
)