React JS/Next JS에서 스크롤할 때 navbar 스타일을 변경하는 방법

오늘은 스크롤에서 navbar 스타일을 변경하는 가장 간단한 방법 중 하나를 알려드리겠습니다. 우선 구성 요소 헤더를 생성하겠습니다. 가능한 한 간단하게 유지하기 위해 헤더에 간단한 부트스트랩 코드를 붙여넣겠습니다. 부트스트랩의 html css를 사용하려면 먼저 jsx로 변환해야 합니다. 이 웹사이트로 이동하여 쉽게 수행할 수 있습니다.

htmltojsx
부트스트랩 navbar에서 복사한 코드를 이 웹사이트에 붙여넣기만 하면 jsx 코드로 반환됩니다.
헤더.jsx

 <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <a className="navbar-brand" href="#">Navbar</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon" />
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mr-auto">
            <li className="nav-item active">
              <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Link</a>
            </li>
            <li className="nav-item dropdown">
              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                <a className="dropdown-item" href="#">Action</a>
                <a className="dropdown-item" href="#">Another action</a>
                <div className="dropdown-divider" />
                <a className="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li className="nav-item">
              <a className="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form className="form-inline my-2 my-lg-0">
            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>

그리고 그 CSS는

헤더.css

.navbar {
    background-color: #a8dcef;
    height: 105px;
    width: 100%;
    position: fixed;
    z-index: 1000;
    border-bottom: 1px solid rgb(192, 192, 192);
}

이제 useEffect 후크를 사용하여

스크롤 위치를 읽고 데이터 속성에 저장합니다.

새로운 스크롤 이벤트를 수신합니다.

스크롤 위치를 업데이트합니다.

이것은 Header.jsx의 useEffect 후크에 붙여넣어야 하는 코드입니다.

useEffect(() => {
        // The debounce function receives our function as a parameter
        const debounce = (fn) => {
            // This holds the requestAnimationFrame reference, so we can cancel it if we wish
            let frame;
            // The debounce function returns a new function that can receive a variable number of arguments
            return (...params) => {
                // If the frame variable has been defined, clear it now, and queue for next frame
                if (frame) {
                    cancelAnimationFrame(frame);
                }
                // Queue our function call for the next frame
                frame = requestAnimationFrame(() => {
                    // Call our function and pass any params we received
                    fn(...params);
                });
            }
        };

        // Reads out the scroll position and stores it in the data attribute
        // so we can use it in our stylesheets
        const storeScroll = () => {
            document.documentElement.dataset.scroll = window.scrollY;
        }

        // Listen for new scroll events, here we debounce our `storeScroll` function
        document.addEventListener('scroll', debounce(storeScroll), { passive: true });

        // Update scroll position for first time
        storeScroll();
    })

이제 마지막 단계입니다. 스타일을 변경하기 위해 이 css를 사용할 수 있습니다. In Header.css

html:not([data-scroll="0"]) .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    /* background-color: #fff; */
    opacity: 0.9;
    box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.5);
    transition: 0.4s linear;
}

메모:-

그게 다입니다. 이제 아래로 스크롤하면 변경 사항을 볼 수 있습니다.

이 형식은 스크롤의 모든 클래스를 변경하는 데 사용할 수 있습니다. 형식은 다음과 같습니다.

html:not([data-scroll="0"]) .Here Class name {
    /* Write the code you want to change */
}

도움이 되셨다면 공유해주세요!
어려운 점이 있으면 댓글로 알려주세요. 제가 도와드리겠습니다.
감사.