7-4. 스크롤 메뉴
■ 스크롤 메뉴
스크롤 메뉴(scrollspy)는 스크롤 위치에 따라 해당 콘텐츠를 보여주는 데 사용됩니다.
<style>
body {
position: relative;
}
</style>
<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="#menu1">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu3">메뉴3</a>
</li>
</ul>
</div>
</nav>
<div id="menu1" class="container-fluid bg-info text-white" style="padding:150px 20px;">
<h1>메뉴1</h1>
<p>메뉴1의 내용입니다.</p>
</div>
<div id="menu2" class="container-fluid bg-success text-white" style="padding:150px 20px;">
<h1>메뉴2</h1>
<p>메뉴2의 내용입니다.</p>
</div>
<div id="menu3" class="container-fluid bg-warning" style="padding:150px 20px;">
<h1>메뉴3</h1>
<p>메뉴3의 내용입니다.</p>
</div>
</body>
ex7-4.html의 실행 결과
