30 lines
877 B
TypeScript
30 lines
877 B
TypeScript
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;
|
|
}
|