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