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 }}
>
...