Scrollspy 예제 - 수평
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>홈짱닷컴</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
<p>Homzzang.com</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
<p>홈페이지제작 + 서버관리/p>
</div>
</body>
PS. 코드 설명
1. data-bs-spy="scroll"
- "스크롤가능영역"으로 사용해야하는 요소에 추가. (보통, body 요소)
- 해당 요소가 올바르게 작동하려면 position:relative 속성 필요.
2. 메뉴와 스크롤 요소 각각 연결
- 메뉴 링크타겟(href="#section1")과 스크롤요소의 아이디(id="section1")가 대응되는지 확인.
3. data-bs-target=".navbar"
- 네비게이션바의 (class 또는 ID) 입력.
- 네이게이션바가 "스크롤가능영역"과 연결되었는지 확인.
4. data-bs-offset="50"
- 스크롤 위치 계산할 때, 위에서 오프셋 할 픽셀수 지정. (기본값: 10)
- 스크롤요소로 이동할 때 메뉴바 링크 활성상태가 너무 빨리 바뀐다 여겨질 때 설정하면 유용.
- 선택사항임.
