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

const headerRef = useRef<HTMLElement>(null)
const isVisible = useHideOnScrollDown(headerRef)

return (
 <header ref={headerRef} style={{ opacity: isVisible ? 1 : 0 }}>
  Header content
</header>
)

const isVisible = useHideOnScrollDown(null, 100)

return (
<header style={{ opacity: isVisible ? 1 : 0 }}>
 Header content
</header>
)