Bootstrap 5 스크롤 스파이

Scrollspy

Scrollspy는 다음에 따라 사용됩니다.스크롤위치 자동 갱신하여 네비게이션 목록에 링크를 업데이트합니다.

Scrollspy를 어떻게 생성하나요

Scrollspy를 어떻게 생성하나요

다음 예제는 Scrollspy를 생성하는 방법을 보여줍니다：

예제
<!-- 스크롤 가능 영역 -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- 네비게이션 바 - <a> 요소는 스크롤 가능 영역의 특정 부분으로 이동하는 데 사용됩니다 -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Section 1</a></li>
</nav>
<div id="section1">
  <!-- Section 1 -->
  <h1>Section 1</h1>
<p>이 페이지를 스크롤하고 스크롤할 때 네비게이션 바를 확인해보세요!</p>
</div>
...

</body>

직접 테스트해보세요

예제를 설명합니다 data-bs-spy="scroll" 스크롤 가능 영역으로 사용되는 요소에 추가하세요（대개 <body> 요소）。

그런 다음 추가하세요 data-bs-target 속성의 값이 id 또는 네비게이션 바의 클래스 이름인 경우.navbar）。이는 네비게이션 바와 스크롤 가능 영역이 연결되는 것을 보장하기 위한 것입니다.

주의하세요, 스크롤 가능 요소는 네비게이션 바 목록 항목 내의 링크 ID와 일치해야 합니다（<div id="section1"> 일치 <a href="#section1">)

선택 사항 data-bs-offset 속성은 스크롤 위치 계산 시 최상단에서 옮긴 픽셀 수를 정의합니다. 네비게이션 바의 링크가 스크롤 가능 요소로 이동할 때, 활성 상태가 너무 일찍 변경되는 것을 느낄 때 이게 유용합니다. 기본 값은 10 픽셀입니다.

상대적 위치가 필요합니다data-bs-spy="scroll"를 가진 요소는 CSS가 필요합니다 위치 속성의 값을 "relative"로 설정해야 정상적으로 작동합니다.