728x90
반응형
SMALL
1. Scrollspy 사용 조건
- Scrollspy는 스크롤 위치에 따라 내비게이션 링크를 자동으로 활성화 상태로 업데이트하는 기능
- 긴 페이지에서 섹션이 어디인지 시각적으로 알려주는 데 유용
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">| 속성 | 설명 |
| `data-bs-spy="scroll"` | 해당 요소를 scrollspy로 지정 |
| `data-bs-target=".navbar"` | 감시할 내비게이션 영역 지정 (클래스나 ID) |
| `data-bs-offset="50"` | 스크롤 계산 시 상단 여백 (픽셀) |
| `position: relative` | Scrollspy 요소에 필수 CSS (예: `<body>` 또는 `<div>`) |
2. 구조 예시
<!-- 내비게이션 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<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>
</nav>
<!-- Scroll 감지할 영역 -->
<div data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50" tabindex="0" class="position-relative">
<div id="section1" class="p-5">내용 1</div>
<div id="section2" class="p-5">내용 2</div>
<div id="section3" class="p-5">내용 3</div>
</div>
주의: `data-bs-target`으로 지정한 내비게이션 요소의 `href="#sectionX"`와
`id="sectionX"`가 정확히 일치해야 함!
3. 자바스크립트로 초기화 (선택 사항)
HTML 속성 외에 JavaScript로 수동 초기화도 가능:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '.navbar',
offset: 50
});
728x90
반응형
LIST