Bootstrap 4 Scrollspy
Scrollspy는 스크롤 위치 에 따라 탐색 목록의 링크를 자동으로 업데이트하는 데 사용된다.
Scrollspy를 만드는 방법
예제
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
기본 예시
예제 보기Scrollspy 수직 메뉴
예제
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
기본 예시
예제 보기참고
W3C School - Bootstrap – Bootstrap 4 Scrollspy
공부 목적 블로그