반응 스크롤로 Navbar를 만드는 방법

반응 스크롤로 Navbar를 만드는 방법 — 관련 코드

웹 페이지에 견고한 탐색 기능을 내장하는 것은 웹 페이지 구축의 첫 번째 단계 중 하나입니다. 따라서 navbar를 갖는 것이 중요한 부분이라는 것은 말할 필요도 없습니다. 내 포트폴리오 페이지를 위해 탐색 모음을 구축하기로 결정하고 우연히 발견한 웹react-scroll을 샅샅이 뒤졌습니다.

React-scroll은 페이지에서 스크롤 상호 작용을 생성하는 프로세스를 간소화하는 라이브러리입니다. 유동적인 스크롤이 내장된 내비게이션을 만들기에 안성맞춤입니다.

요구 사항

스티커 탐색 모음

링크가 있는 탐색 모음 내부의 탐색 섹션

링크를 클릭하면 해당 섹션으로 스크롤됩니다

.

코드 따라

먼저 navbar가 포함된 헤더를 빌드해 보겠습니다.

   <header>
        <nav>
          <ul>
            <li>

                ABOUT

            </li>
            <li>
                PROJECTS

            </li>
            <li>
                BLOG
            </li>
            <li>
                CONTACT ME
            </li>
          </ul>
        </nav>
   </header>

충분히 간단합니다. 연결해야 하는 몇 개의 섹션이 있는 헤더가 있습니다. 다음으로 react-scroll이 제공하는 기능을 살펴보겠습니다.

문서에 따르면 링크 구성 요소가 있습니다. 이 링크 구성 요소는 우리가 관심을 갖는 3개의 소품인 activeClass , spy 및 to와 함께 제공됩니다.

스크롤이 구성 요소 위에 있을 때 activeClass가 navbar에 있는 목록 요소의 스타일을 변경합니다

.

spy는 activeClass를 적용하기 위해 감시해야 하는 요소를 react-scroll에 알리는 방법입니다

.

to는 스크롤해야 하는 요소이며 ID

와 일치합니다.

이를 고려하여 모든 소품을 추가해 봅시다.

       <li>
              <Link activeClass="active" smooth spy to="about">
                ABOUT
              </Link>
            </li>
            <li>
              <Link activeClass="active" smooth spy to="projects">
                PROJECTS
              </Link>
            </li>
            <li>
              <Link activeClass="active" smooth spy to="blog">
                BLOG
              </Link>
            </li>
            <li>
              <Link activeClass="active" smooth spy to="contact">
                CONTACT ME
              </Link>
            </li>

엄청난! 이제 섹션을 만들어 보겠습니다. 섹션은 헤더 바로 아래에 있는 부분에 연결되어야 합니다.

<section id="about">ABOUT</section>
<section id="projects">PROJECTS</section>
<section id="blog">BLOG</section>
<section id="contact">CONTACT ME</section>

부드러운 소품도 링크에 추가되었습니다. 이는 부드러운 스크롤 동작을 추가하기 위한 것입니다.

스타일링

이것으로 끝났습니다! 남은 것은 섹션에 충분한 공간이 있도록 몇 가지 스타일을 추가하는 것입니다. 또한 navbar 자체에 일부 스타일을 적용하여 요구 사항에 지정된 고정 속성을 갖도록 합시다.

section {
  display: grid;
  place-items: center;
  height: 100vh;
  font-size: 32px;
  font-weight: bold;
}

.nav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: -5px;
  z-index: 2;
  height: 70px;
  min-height: 70px;
  width: calc(100% - 1.5rem);
  background-color: #fff;
  padding: 0 1rem;
  box-shadow: 0 0.125rem 0.25rem 0 rgb(0 0 0 / 11%);
}

전체 작업 예제와 적용된 나머지 스타일을 확인하십시오.



어떤 다른 구성 요소를 보고 싶습니까? 아래 댓글로 알려주세요.