Sticky Header с относительным скроллом на React

Делаю прокрутку на хедере в зависимости от скролла. Переменным scrollDown и scrollUp должна присваиваться сумма разницы предыдущего положения и текущего при скролле, а получается только переназначать значение. Должно быть 1+5+15.. а выходит 1=5=15..

export const Header = () => {

const headerRef = useRef<HTMLDivElement>(null)
const headerHeight = headerRef.current?.clientHeight as number

const [currentScrollPosition, setCurrentScrollPosition] = useState(0);
const [prevScrollPosition, setPrevScrollPosition] = useState(0)
const [headerTop, setHeaderTop] = useState(0)

let scrollDown = prevScrollPosition - currentScrollPosition
let scrollUp = -(currentScrollPosition - prevScrollPosition)

const handleScroll = () => {
    setCurrentScrollPosition(window.scrollY);
};
const prevHandleScroll = () => {
    setPrevScrollPosition(currentScrollPosition);
};
window.addEventListener('scroll', prevHandleScroll);
window.addEventListener('scroll', handleScroll);
useEffect(() => {


    if (currentScrollPosition > prevScrollPosition) {
        setHeaderTop(scrollDown)

    } else {
        setHeaderTop(scrollUp)
    }

    // if (currentScrollPosition > prevScrollPosition) {
    //  setHeaderTop(-headerHeight)

    // } else {
    //  setHeaderTop(0)
    // }

});
// console.log(prevScrollPosition - currentScrollPosition)
return (
    <header className="header"
        ref={headerRef}
        style={{ top: headerTop }}
    >

...


Ответы (0 шт):