useHideOnScrollDown()
useHideOnScrollDown(
targetRef
?,threshold
?):boolean
Defined in: src/hooks/dom/useHideOnScrollDown.ts:38
Custom hook to toggle visibility on scroll. It hides the element when scrolling down and shows it when scrolling up.
Parameters
targetRef?
RefObject
<null
| HTMLElement
>
The reference to the target element (e.g., header). If not provided, defaults to null
(uses threshold
).
threshold?
number
The scroll position threshold before hiding (used if targetRef
is not provided). For example, if threshold
is 100
, the element will hide every time the scroll position is greater than 100
.
Returns
boolean
- Whether the element should be visible.
Examples
tsx
const headerRef = useRef<HTMLElement>(null)
const isVisible = useHideOnScrollDown(headerRef)
return (
<header ref={headerRef} style={{ opacity: isVisible ? 1 : 0 }}>
Header content
</header>
)
tsx
const isVisible = useHideOnScrollDown(null, 100)
return (
<header style={{ opacity: isVisible ? 1 : 0 }}>
Header content
</header>
)