Bootstrap 5

[basic] BS5 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)

1,236

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)

스크롤요소로 이동할 때 메뉴바 링크 활성상태가 너무 빨리 바뀐다 여겨질 때 설정하면 유용.

선택사항임.