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-target 아이디의 값 또는 네비게이션 바 (의 클래스 이름과 속성을 .navbar ). 이 네비게이션 바는 스크롤 영역과 연결되어 있는지 확인하는 것입니다.
스크롤 요소가 네비게이션 바의 목록 항목 내부의 링크 (의 ID와 일치해야합니다 <div id="section1"> 일치 <a href="#section1"> ).
선택적인 data-offset 특성은 스크롤의 위치를 계산할 때 상부로부터 오프셋 픽셀의 개수를 지정한다. 당신이 스크롤 요소로 점프 할 때 네비게이션 바 내부 링크가 너무 일찍 너무 빨리 활성 상태를 변경하거나 느낄 때 유용합니다. 기본값은 10 픽셀입니다.
상대 위치를 필요가있는 요소 data-spy="scroll" 하는 CSS 요구 position 의 값, 속성을 "relative" 제대로 작동합니다.
Scrollspy 수직 메뉴
이 예에서, 우리는 메뉴로 부트 스트랩의 수직 탐색 약을 사용합니다 :
예
<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> »그것을 자신을 시도 완료 Bootstrap Scrollspy 참조
모든 scrollspy 방법 및 이벤트의 완전한 참고로, 우리로 이동 부트 스트랩 JS Scrollspy 참조 .