스크롤 방향에 반응하는 헤더

스크롤이 아래로 향하면 숨기고, 위를 향하면 보여주는 헤더가 있으면 좋을 것 같다는 생각이 들어 transition을 활용해 간단한 애니메이션으로 구현했다.

2021.05.30 내용 추가 - 스크롤 이벤트에 throttle 적용

// Header Component

import { useState, useEffect, useRef } from 'react';
import styled from 'styled-components';

const HeaderArea = styled.div`
    position: relative;
    width: 100%;
    height: 80px;
`;

const HeaderWrap = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 80px;
    transition: 0.4s ease;
    background-color: #f00;
    &.hide {
        transform: translateY(-80px);
    }
`;

const throttle = function (callback, waitTime) {
    let timerId = null;
    return (e) => {
        if (timerId) return;
        timerId = setTimeout(() => {
            callback.call(this, e);
            timerId = null;
        }, waitTime);
    };
};

const Header = () => {
    const [hide, setHide] = useState(false);
    const [pageY, setPageY] = useState(0);
    const documentRef = useRef(document);

    const handleScroll = () => {
        const { pageYOffset } = window;
        const deltaY = pageYOffset - pageY;
        const hide = pageYOffset !== 0 && deltaY >= 0;
        setHide(hide);
        setPageY(pageYOffset);
    };

    const throttleScroll = throttle(handleScroll, 50);

    useEffect(() => {
        documentRef.current.addEventListener('scroll', throttleScroll);
        return () => documentRef.current.removeEventListener('scroll', throttleScroll);
    }, [pageY]);

    return (
        <HeaderArea>
            <HeaderWrap className={hide && 'hide'}>Header Contents ...</HeaderWrap>
        </HeaderArea>
    );
};

export default Header;