[React] 리액트 헤더 스크롤 시 CSS 변경

 헤더 스크롤 시 디자인 변경

 

Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으로도 올려본다.

 

iancoding.tistory.com/216

[Vue] 스크롤 시 헤더 색 변경

Vue는 위의 블로깅을 참조.

 

Header.js

import React, {useState, useEffect} from 'react';
import "./css/Header.css";

function Header() {
    const [scrollPosition, setScrollPosition] = useState(0);
    const updateScroll = () => {
        setScrollPosition(window.scrollY || document.documentElement.scrollTop);
    }
    useEffect(()=>{
        window.addEventListener('scroll', updateScroll);
    });
    return (
        <div className="header">
            <div className={scrollPosition < 100 ? "original_header" : "change_header"}>
                <p className="title">타이틀</p>
            </div>
        </div>
    )
}

export default Header;

 

Header.css

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

.headerLogo{
    width: 1000px;
}

.title {
    margin: 18px 0px;
    float: left;
    padding-left: 100px;
}

.original_header {
    position: fixed;
    color: white;
    font-family: 'NanumSquare', sans-serif;
    background-color: #11ffee00;
    font-size:40px;
    font-weight: 400;
    width: 100%;
    height: 80px;
    top: 0;
}

.change_header {
    position: fixed;
    color: black;
    font-family: 'NanumSquare', sans-serif;
    background-color: white;
    font-size:40px;
    font-weight: 400;
    width: 100%;
    height: 80px;
    top: 0;
    border-bottom: 1px solid #EBEBEB;
}

 

JSX안에서 삼항연산자를 사용해 {조건 ? 참일때 : 거짓일때} 스크롤 100px 이상일때 변환되도록 해주면 된다.

그리고 CSS에서 오리지널과 스크롤 내렸을 때 바뀔 디자인을 따로 지정해주면 끝.