스크롤 위치에 따라 다른 css 적용하기

토스 slash 사이트를 보다가 헤더가 깜찍해보여서 해보려 한다.

↑ 헤더가 스크롤 최상단에 위치해 있을 땐 배경색과 같고,

↑ 스크롤을 내리면 투명도를 줘서 구분을 해준다. (관계자분 모자이크 해드림ㅎ)

방법

const [scrollPosition, setScrollPosition] = useState(0);

  const updateScroll = () => {
    setScrollPosition(window.scrollY || document.documentElement.scrollTop);
  };

1. 스크롤위치 State를 하나 관리한다.

2. 현재 스크롤 위치를 set해주는 함수를 정의한다.

❗️IE (할아버지도 안쓰심ㅋ)에서는 window.scrollY를 지원하지 않으므로, document.documentElement.scrolltop도 넣어주자.

useEffect(() => {
    window.addEventListener('scroll', updateScroll);
    return () => {
      window.removeEventListener('scroll', updateScroll); //unmount시 해제되도록
    };
  }, []);

3. 처음에 window객체를 불러오지 못하므로 useEffect안에 함수를 넣어줘야한다.

4. unmount됐을 경우엔 scroll event를 감시할 필요가 없기 때문에 cleanup 부분에서 EventListener를 삭제해준다.

적용

<HeaderWrapper
        style={{
          backgroundColor:
            scrollPosition < 50 ? 'transparent' : 'rgba(0, 0, 0, 0.2)',
        }}
      >

이제 scrollPosition에 따라 다른 style을 주면 된다.