JavaScript / Scroll event , scrollTop 구하기

리엑트로 퍼블리싱중이다.

스크롤 시 헤더가 변화하는걸 구현하려고 했다.

처음엔 훅으로 해보려고 했는데 잘안되서그냥 자바스크립트로 구현했다.

 

1. 스크롤이벤트 발생시 함수를 실행해준다.

  document.addEventListener('scroll', function() {
    scrollDown();
  });

2. 스크롤 했을때 일정구간이 지나면 클래스를 부여한다.

const scrollDown = () =>{
    const scrollTop = document.documentElement.scrollTop;
    const headerWrap = document.getElementById("header");
    if(scrollTop > 100){
      console.log("헤더야 없어져랏")
      headerWrap.classList.add(`${header.scroll_down}`);
    }else{
      console.log("헤더야 생겨랏")
      headerWrap.classList.remove(`${header.scroll_down}`);
    }
  }

콘솔찍어보면 이벤트가 잘 발생한다.

굳이 1번과 2번을 나눌 필요는 없는거 같지만 스크롤시 다른 이벤트도 넣을 수 있으니 따로따로 해보았다. 

 

<코드전체>

import React from 'react';
import HeaderNav from './HeaderNav';
import HeaderTop from './HeaderTop';

import header from '../../assets/css/common/header.module.css';


export default function Header() {
  const scrollDown = () =>{
    const scrollTop = document.documentElement.scrollTop;
    const headerWrap = document.getElementById("header");
    if(scrollTop > 100){
      console.log("헤더야 없어져랏")
      headerWrap.classList.add(`${header.scroll_down}`);
    }else{
      console.log("헤더야 생겨랏")
      headerWrap.classList.remove(`${header.scroll_down}`);
    }
  }

  document.addEventListener('scroll', function() {
    scrollDown();
  });

  return (
    <>
      <div className={header.header_wrap} id="header">
        <div className={header.inner}>
          <HeaderTop />
          <HeaderNav />
        </div>
      </div>
    </>
  )
}