부트 스트랩 스크롤 모니터 (Scrollspy) 위젯

스크롤 모니터 (Scrollspy) 플러그, 자동 네비게이션 위젯이 자동으로 스크롤 바의 위치에 따라 해당하는 탐색 타겟을 업데이트하는 업데이트. 스크롤로 기본 구현은, 스크롤 바 위치 기반.active는 클래스는 탐색 모음에 추가됩니다.

당신은 각각의 플러그인 기능을 참조하려면scrollspy.js를 참조 할 필요가있다.또는, 부트 스트랩 플러그인 개요 장에서는 언급, 당신은bootstrap.js또는bootstrap.min.js의압축 된 버전을 참조 할 수있습니다.

용법

당신은 내비게이션 모니터 행동의 상단에 스크롤을 추가 할 수 있습니다 :

• 데이터 속성을 통해 : 당신은 데이터 스파이 = "스크롤"을추가 할 요소 (일반적으로 몸)을 듣고싶습니다.그런부트 스트랩 .nav 컴포넌트 속성 데이터를 대상으로부모 요소의 ID 또는 클래스를추가한다.제대로 작동하려면, 당신은 당신이 ID 모니터 요소가 존재 연결할 페이지의 본문에 일치하는 항목이 있는지 확인해야합니다.

  <바디 데이터 스파이 = "스크롤"데이터 대상 = ". Navbar를-예를 들어">
  ...
  <사업부 클래스 = "Navbar를 - 예를 들어">
  	<UL 클래스 = "탐색의 탐색 - 탭">
  		...
  	</ UL>
  </ DIV>
  ...
  </ BODY>
  

• 자바 스크립트 작성자 : 당신은 자바 스크립트 호출 (.scrollspy호출 한 후, 요소를 선택 듣고,듣기)기능을 스크롤 할 수 있습니다 :

  . $ ( '바디') scrollspy ({대상 : '.navbar - 예를 들어'})
  

예

다음의 예는 (Scrollspy)를 모니터링 속성 데이터를 스크롤을 사용하는 방법을 보여줍니다 플러그인 :

결과는 다음과 같다 :

옵션

데이터 속성이나 자바 스크립트를 통해 전달합니다. 다음 표에서는 이러한 옵션을 나열합니다 :

방법

$ ( '[데이터 스파이 = "스크롤"]'). 각 (함수 () {
  var에 $ 스파이 = $ (이) .scrollspy ( '새로 고침')
})

예

다음의 예는( '새로 고침') 방법 .scrollspy을보여줍니다

결과는 다음과 같다 :

행사

다음 표는 모니터가 이벤트를 스크롤하는 데 사용할 보여줍니다. 이러한 이벤트시 후크 함수를 사용할 수있다.

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

예

다음의 예는activate.bs.scrollspy 이벤트를 사용하는 방법을 보여줍니다 :

결과는 다음과 같다 :

더 많은 예제

가로 스크롤 듣기 만들기

다음의 예는, 수평 스크롤 리스너를 만드는 방법을 보여줍니다 :

수직 스크롤 청취를 만드는 방법

다음 예는 세로 스크롤 리스너를 만드는 방법을 보여줍니다 :