많은 최신 웹 사이트에서 더 나은 탐색을 위해 페이지를 아래로 스크롤하더라도 이동을 위해 링크를 선택하기 위해 항상 위로 올라갈 필요가 없도록 탐색 모음/머리글이 페이지 상단에 고정되는 이러한 효과를 보았을 것입니다. 페이지 사이. 안 그래?
그것이 어떻게 작동하는지 궁금하다면 이 게시물은 페이지에 더 나은 UX를 추가하는 다음 프로젝트를 위한 매우 간단하면서도 아름다운 효과/기능을 만드는 데 도움이 되는 가이드입니다.
당신은 무엇을 기다리고 있습니까? 시작하자 🚀

초기 설정

먼저 처음부터 반응 앱을 만들 것입니다. 이를 위해 즐겨 사용하는 터미널에 이 명령을 입력하십시오.

create-react-app sticky-navbar

create-react-app에서 기본적으로 생성된 일부 파일을 삭제할 것입니다. 일부 파일을 삭제하면 프로젝트 디렉토리가 다음과 같이 표시됩니다.


구성 요소를 만드는 것부터 시작하겠습니다. 이 작은 프로젝트에는 구성 요소 두 개면 충분합니다. Components라는 디렉터리를/src에 만들고 Navbar.js 및 Content.js 파일 두 개를 추가합니다.
App.js를 편집하여 시작하십시오. 다음 코드를 추가하여 기본 레이아웃으로 시작합니다.

//App.js
import React from 'react';
import Navbar from './components/Navbar';
import Content from './components/Content';
function App() {
  return (
    <div className="App">
      <Navbar />
      <Content />
    </div>
  );
}
export default App;

여기에서 우리는 Navbar와 Content라는 두 가지 기능적 구성 요소를 렌더링하고 있으며 그 이름은 그 목적을 명확하게 설명합니다.
아래 코드는 Navbar.js를 채웁니다. Navbar 구성 요소는 기본적으로 웹 사이트 로고와 4/5 링크가 있는 하나의 탐색 메뉴로 구성된 헤더 섹션입니다.

//Navbar.js
import React from 'react';
import './navbar.scss';
import Logo from './../img/logo.svg';
const Navbar=() => {
  return (
    <header className={navbarClasses.join(" ")}>

        <div className="logo">
            {/* your logo */}
        </div>
        <nav className="navigation">
            {/* your navigation */}
        </nav>

    </header>
  )
};
export default Navbar;

이제 페이지에 스타일을 지정할 차례입니다. 자신만의 스타일 세트를 가질 수 있습니다. 또는 내 스타일을 사용하려면 아래 주어진 스타일을 navbar.scss에 복사하십시오.

//navbar.scss
.navbar{
  width: 100%;
  min-height: 6vh;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  transition: all .7s ease-in;
}
//IMPORTANT
.scrolled{
  position: fixed;
  top: 0;
  left: 0;
  background-color: lightblue;
}
.logo img{
  width: 50px;
}
.navigation{
    //your navigation styles
}

이제 Content.js를 고기로 채우고 Navbar와 함께 페이지에 일부 콘텐츠를 추가합니다.
이 코드는 더미 상자를 채워 페이지의 높이를 충분히 차지합니다. 실제 콘텐츠를 사용할 수 있습니다. 이것은 데모용입니다.

//Content.js
import React from 'react';
import './content.scss';
const Content=() => {
  const data=(
    <div className="box">
        <h2>My div content </h2>
    </div>
  );
return (
    <main className="content">
        {data}
        {data}
        {data}
        {data}
        {data}
    </main>
  )
}
export default Content;

Content.js 스타일

//content.scss
.content{
    width: 80%;
    margin:2rem 10% 0 10%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
}
.box{
    width:80%;
    margin:2rem 10% 0 10%;
    height:100vh;
    background-color:plum;
}

이 모든 설정이 끝나면 페이지는 다음과 같이 표시됩니다.

메인 로직

이제 Sticky navbar에 고기를 설정했으므로 기본 Logic을 추가하여 고정 효과를 얻습니다. 이를 위해 React 후크를 사용하여 약간의 상태 관리를 수행할 것입니다. react-hook에 대해 잘 모르더라도 걱정하지 마세요. 클래스가 있는 구성 요소에서도 일반 상태 관리를 사용할 수 있습니다.
따라서 아이디어는 아래로 스크롤할 때 window.scrollY를 사용하여 componentDidMount() 또는 useEffect()에서 scrollY(즉, 위에서 스크롤한 총 높이(픽셀 단위))를 확인하고 스크롤 높이가 어떤 값보다 큰지 확인하는 것입니다. , 이 경우 200px라고 하면 Navbar의 클래스를 스크롤된 navbar로 변경합니다. 내 스타일을 복사한 경우 .scrolled에 대한 스타일이 이미 navbar.scss에 있습니다. navbar에서 스크롤된 navbar로 클래스 간에 전환하기 위해 배열 방식을 사용했습니다.

혼란스러운?

//Navbar.js
import React,{useEffect} from 'react';
import './navbar.scss';
const Navbar=() => {
  const [scrolled,setScrolled]=React.useState(false);
const handleScroll=() => {
    const offset=window.scrollY;
    if(offset > 200 ){
      setScrolled(true);
    }
    else{
      setScrolled(false);
    }
  }

  useEffect(() => {
    window.addEventListener('scroll',handleScroll)
  })
let navbarClasses=['navbar'];
  if(scrolled){
    navbarClasses.push('scrolled');
  }

   return (
    /* rest remains same*/
   )
};
export default Navbar;

이런 식으로 우리는 처음부터 간단하고 끈적한 Navbar를 성공적으로 만들었습니다.
전체 코드를 보려면 내GitHub 저장소를 확인하십시오.

결론

이것은 이 간단한 데모 애플리케이션을 위한 것이었습니다. 이 게시물이 도움이 되었기를 바라며 귀하의 말로 설명하여 문제를 해결했습니다. 이 게시물에 대해 궁금한 점이 있으면 언제든지 저에게 개인적으로 물어보십시오. 개인 차원에서 답변해 드리겠습니다.
고맙습니다. 좋은 하루 되세요!