부트스트랩 JS 스크롤스파이

❮ 이전의 다음 ❯

JS Scrollspy(scrollspy.js)

Scrollspy 플러그인은 스크롤 위치를 기반으로 탐색 목록의 링크를 자동으로 업데이트하는 데 사용됩니다.

Scrollspy에 대한 자습서는 Bootstrap Scrollspy 자습서 를 읽어보십시오 .

팁: Scrollspy 플러그인은 종종 Affix 플러그인과 함께 사용됩니다 .

데이터-* 속성을 통해

data-spy="scroll"스크롤 가능 영역으로 사용해야 하는 요소에 추가 합니다(종종 이것이 <body>요소임).

그런 다음 data-targetid 값 또는 탐색 모음의 클래스 이름( )으로 속성을 추가합니다 .navbar. 이것은 탐색 모음이 스크롤 가능한 영역과 연결되어 있는지 확인하기 위한 것입니다.

<div id="section1">스크롤 가능한 요소는 탐색 모음의 목록 항목( 일치 ) 내부에 있는 링크의 ID와 일치해야 합니다 <a href="#section1">.

선택적 data-offset속성은 스크롤 위치를 계산할 때 상단에서 오프셋할 픽셀 수를 지정합니다. 스크롤 가능한 요소로 이동할 때 탐색 모음 내부의 링크가 활성 상태를 너무 빨리 또는 너무 일찍 변경한다고 느낄 때 유용합니다. 기본값은 10픽셀입니다.

상대 위치 지정 필요: data-spy="scroll"이 있는 요소는 CSS position 속성이 필요하며 값이 "relative"인 값이 제대로 작동해야 합니다.

예시

<body data-spy="scroll" data-target=".navbar" data-offset="50">


<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>


<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

자바스크립트를 통해

다음을 사용하여 수동으로 활성화:

예시

$('body').scrollspy({target: ".navbar"})

Scrollspy 옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-offset=""에서와 같이 옵션 이름을 data-에 추가합니다.

Name	Type	Default	Description	Try it
offset	number	10	Specifies the number of pixels to offset from top when calculating the position of scroll

Scrollspy 방법

다음 표에는 사용 가능한 모든 scrollspy 방법이 나열되어 있습니다.

Method	Description	Try it
.scrollspy("refresh")	When adding and removing elements from the scrollspy, this method can be used to refresh the document

Scrollspy 이벤트

다음 표에는 사용 가능한 모든 scrollspy 이벤트가 나열되어 있습니다.

Event	Description	Try it
activate.bs.scrollspy	Occurs when a new item becomes activated by the scrollspy

더 많은 예

애니메이션 스크롤이 있는 Scrollspy

같은 페이지의 앵커에 부드러운 페이지 스크롤을 추가하는 방법:

부드러운 스크롤

// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});

// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {

    // 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
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });

} // End if

});

Scrollspy 및 접미사

Scrollspy 플러그인과 함께 Affix 플러그인 사용 :

가로 메뉴(내비바)

세로 메뉴(Sidenav)