32 lines
881 B
TypeScript
32 lines
881 B
TypeScript
"use client"
|
|
|
|
import { useState, useCallback, useEffect } from "react"
|
|
|
|
export function useScrollPosition(threshold = 0.5) {
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
|
|
|
const handleScroll = useCallback(() => {
|
|
if (typeof window === "undefined") return
|
|
|
|
const scrollPosition = window.scrollY
|
|
const viewportHeight = window.innerHeight
|
|
const shouldBeSticky = scrollPosition > viewportHeight * threshold
|
|
|
|
setIsScrolled((prev) => (shouldBeSticky !== prev ? shouldBeSticky : prev))
|
|
}, [threshold])
|
|
|
|
// Add scroll event listener
|
|
useEffect(() => {
|
|
// Initial check
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
handleScroll()
|
|
|
|
window.addEventListener("scroll", handleScroll, { passive: true })
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll)
|
|
}
|
|
}, [handleScroll])
|
|
|
|
return isScrolled
|
|
}
|