JS Scrollspy (scrollspy.js)
Scrollspy 플러그인 자동 스크롤 위치에 기초하여 네비게이션 목록에 링크를 업데이트하기 위해 사용된다.
Scrollspy에 대한 자습서를 들어, 우리의 읽기 부트 스트랩 Scrollspy 자습서 .
팁 : Scrollspy 플러그인 자주 함께 사용되는 접사의 플러그인.
통해 data-* 속성
추가 data-spy="scroll" 스크롤 영역으로 사용되어야하는 요소 (자주는 인 <body> 요소).
그런 다음 추가 data-target 아이디의 값 또는 네비게이션 바 (의 클래스 이름과 속성을 .navbar ). 이 있는지 확인하는 것입니다 navbar 스크롤 영역과 연결되어있다.
스크롤 요소가 네비게이션 바의 목록 항목 내부의 링크 (의 ID와 일치해야합니다 <div id="section1"> 일치 <a href="#section1"> ).
선택적인 data-offset 특성은 스크롤의 위치를 계산할 때 상부로부터 오프셋 픽셀의 개수를 지정한다. 당신이 스크롤 요소로 점프 할 때 네비게이션 바 내부 링크가 너무 일찍 너무 빨리 활성 상태를 변경하거나 느낄 때 유용합니다. 기본값은 10 픽셀입니다.
상대 위치를 필요가있는 요소 data-spy="scroll" 하는 CSS 요구 position 의 값, 속성을 "relative" 제대로 작동합니다.
예
<!-- 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>
»그것을 자신을 시도 자바 스크립트를 통해
수동으로 사용 :
Scrollspy 옵션
옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 속성의 경우에서와 같이, 데이터 -에 옵션 이름을 추가 = ""데이터의 오프셋 (offset)입니다.
| 이름 | 유형 | 태만 | 기술 | 시도 해봐 |
|---|---|---|---|---|
| offset | number | 10 | 스크롤의 위치를 계산할 때 위에서 상쇄 화소 수를 지정 | 시도 해봐 |
Scrollspy 방법
다음 표는 사용 가능한 모든 scrollspy 방법.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .scrollspy("refresh") | 추가하고 scrollspy에서 요소를 제거 할 때,이 메소드는 문서를 새로 고칠 수 있습니다 | 시도 해봐 |
Scrollspy 이벤트
다음 표는 사용 가능한 모든 scrollspy 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| activate.bs.scrollspy | 새 항목이 scrollspy에 의해 활성화된다 때 발생 | 시도 해봐 |
예
애니메이션 스크롤 Scrollspy
어떻게 같은 페이지에 앵커로 부드러운 페이지 스크롤을 추가하는 방법 :
부드러운 스크롤
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); »그것을 자신을 시도 Scrollspy 및 부착
은 Using 부착 Scrollspy 플러그인과 함께 플러그인을 :
수평 메뉴 (Navbar의)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> »그것을 자신을 시도 수직 메뉴 (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> »그것을 자신을 시도