[react] 스크롤에 따라 나타나고 사라지는 네비게이션 바 구현하기 (Navbar)

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

 

스크롤에 따라 나타나고 사라지는 네비게이션 바 구현하기

 

 

 

이번 프로젝트에서 스크롤에 따라 나타나고 사라지는 네비게이션 바를 구현했습니다.

 

스크롤을 내릴 때는 사라졌다가, 스크롤을 올리면 다시 나타납니다.

 

 

 

 

구현 화면

 

 

 

 

 

 

 

작성 코드

 

마지막 스크롤 위치를 기억하여 네비게이션 바의 표시 상태를 변경하는 코드입니다.

 

스크롤이 아래로 진행 중이면 false, 스크롤이 위로 진행 중이면 true로 설정하여 바 상태를 변경하였습니다.

 

 

Nav.jsx

import { useEffect, useState } from 'react';
import style from './Nav.module.css'
import { Link } from 'react-router-dom';

function Nav() {
    // 네비게이션 바 표시 상태를 관리하는 state
    const [showNav, setShowNav] = useState(true);
    // 마지막 스크롤 위치를 저장하는 state
    const [lastScrollY, setLastScrollY] = useState(0);

    useEffect(() => {
        // 스크롤 이벤트를 처리하는 함수
        const handleScroll = () => {
            const currentScrollY = window.scrollY;
            // 스크롤이 아래로 진행되었는지 확인
            if (currentScrollY > lastScrollY) {
                setShowNav(false); // 스크롤을 내릴 때 네비게이션 바 숨기기
            } else {
                setShowNav(true); // 스크롤을 올릴 때 네비게이션 바 표시
            }
            // 마지막 스크롤 위치 업데이트
            setLastScrollY(currentScrollY);
        };

        // 스크롤 이벤트 리스너 등록
        window.addEventListener('scroll', handleScroll);

        // 클린업 함수에서 이벤트 리스너 제거
        return () => window.removeEventListener('scroll', handleScroll);
    }, [lastScrollY]); // lastScrollY가 변경될 때마다 useEffect가 실행됩니다.

    return (
        <div className={`${style.header} ${showNav ? '' : style.hideNav}`}>
            <Link className={style.Logo} to="/">
                <img src={`${process.env.PUBLIC_URL}/img/logo.svg`} alt="MDS Logo" className={style.logo} />
            </Link>
            <div className={style.navbar}>
                <Link className={style.navbarMenu} to={'/map'}>
                    <img src={`${process.env.PUBLIC_URL}/img/mountainpath.svg`} alt="등산 정보 아이콘" className={style.icon1} />등산 정보
                </Link>
                <Link className={style.navbarMenu} to={'/review'}>
                    <img src={`${process.env.PUBLIC_URL}/img/flag.svg`} alt="등산 후기 아이콘" className={style.icon2} />등산 후기
                </Link>
                <Link className={style.navbarMenu} to={'/rec'}>
                    <img src={`${process.env.PUBLIC_URL}/img/mountainrec.svg`} alt="등산로 추천 아이콘" className={style.icon1} />등산로 추천받기
                </Link>
            </div>
        </div>
    )
}


export default Nav;

 

 

 

Nav.module.css

 

.hidenav 스타일에서 navbar를 숨기는 효과를 적용합니다.

.header {
    display: flex;
    align-items: center;
    background-color: rgba(179, 179, 179, 0.42);
    padding-left: 2rem;
    z-index: 1000;
    /* 다른 요소들 위에 오도록 z-index 설정 */
    position: fixed;
    transition: transform 0.3s ease;
    /* transform 속성에 대한 전환 효과 */
}

.logo {
    width: 12rem;
    height: 5rem;
}

.icon1 {
    width: 3rem;
    height: 1.5rem;
}

.icon2 {
    width: 2rem;
    height: 1.1rem;
}

.navbar {
    justify-content: center;
    width: 100vw;
    text-align: center;
    font-size: 1.2rem;
}

.navbarMenu {
    margin: 5rem;
    text-decoration: none;
    color: rgb(0, 0, 0);
    transition: color 0.3s ease;
    /* 색상 변화에 애니메이션 효과를 추가합니다 */
    position: relative;
    /* 가상 요소의 기준점 설정 */
    overflow: hidden;
    /* 밑줄이 링크 영역 바깥으로 나가지 않도록 설정 */
}

.navbarMenu:hover {
    color: #3ca50f;
    /* 마우스 오버 시 글자 색상을 변경합니다 */
}

.navbarMenu::after {
    content: '';
    /* 가상 요소의 내용은 비워둡니다 */
    position: absolute;
    left: 0%;
    /* 왼쪽에서 50%의 위치에서 시작 */
    bottom: -0.5rem;
    /* 링크 바닥으로부터 -0.5rem 위에 위치 */
    width: 0;
    /* 초기 너비는 0으로 설정하여 보이지 않게 합니다 */
    height: 0.13rem;
    /* 밑줄의 두께 */
    background: rgba(0, 0, 0, 0.279);
    /* 밑줄의 색상 */
    transition: width 0.5s ease, left 0.5s ease;
    /* 너비와 위치에 대한 전환 효과 설정 */
}

.navbarMenu:hover::after,
.navbarMenu:focus::after {
    width: 100%;
    /* 마우스를 올리거나 포커스 시 밑줄의 너비를 100%로 변경 */
    left: 0;
    /* 위치를 왼쪽 끝으로 변경 */
}

/* Nav.module.css */
.hideNav {
    transform: translateY(-100%);
    /* 네비게이션 바를 위로 숨깁니다 */
    transition: transform 0.3s ease;
    /* 부드러운 전환 효과 */
}

 

 

 

 

위와 같은 방식으로 스크롤에 따라 사라지고 나타나는 네비게이션 바를 구현할 수 있습니다.