-
JavaScript / Scroll event , scrollTop 구하기Web dev/JavaScript 2022. 3. 25. 14:03728x90반응형
리엑트로 퍼블리싱중이다.
스크롤 시 헤더가 변화하는걸 구현하려고 했다.
처음엔 훅으로 해보려고 했는데 잘안되서그냥 자바스크립트로 구현했다.
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> </> ) }
728x90반응형'Web dev > JavaScript' 카테고리의 다른 글
JS / 가격콤마찍기 Price new Intl.NumberFormat() (0) 2022.05.07 JavaScript / scroll stop event 주기 (0) 2022.04.16 JavaScript / fetch() 로 html include 하기 (0) 2022.04.16 JavaScript / 브라우저 화면 넓이, 높이 값 구하기 (0) 2022.04.15 JavaScript / Class 제어하기 (0) 2022.03.25