부트스트랩 Scrollspy 플러그인(고급)
Scrollspy 플러그인
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-inverse navbar-fixed-top">
...
<ul class="nav 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>
예시 설명
data-spy="scroll"스크롤 가능 영역으로 사용해야 하는 요소에 추가 합니다(종종 이것이 <body>요소임).
그런 다음 data-targetid 값 또는 탐색 모음의 클래스 이름( )으로 속성을 추가합니다 .navbar. 이것은 탐색 모음이 스크롤 가능한 영역과 연결되어 있는지 확인하기 위한 것입니다.
<div id="section1">스크롤 가능한 요소는 탐색 모음의 목록 항목( 일치 ) 내부에 있는 링크의 ID와 일치해야 합니다 <a href="#section1">.
선택적 data-offset속성은 스크롤 위치를 계산할 때 상단에서 오프셋할 픽셀 수를 지정합니다. 스크롤 가능한 요소로 이동할 때 탐색 모음 내부의 링크가 활성 상태를 너무 빨리 또는 너무 일찍 변경한다고 느낄 때 유용합니다. 기본값은 10픽셀입니다.
상대 위치 지정 필요: data-spy="scroll"이 있는 요소는 CSS position 속성이 필요하며 값이 "relative"인 값이 제대로 작동해야 합니다.
Scrollspy 수직 메뉴
이 예에서는 Bootstrap의 수직 탐색 알약을 메뉴로 사용합니다.
예시
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
전체 부트스트랩 Scrollspy 참조
모든 scrollspy 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS Scrollspy 참조 로 이동하십시오 .