이 기사는 주로 JavaScript 플러그인 - 스크롤 청취를 배웁니다.
1. 케이스
스크롤 청취 플러그인은 스크롤 막대의 위치에 따라 해당 탐색 마크를 자동으로 업데이트 할 수 있습니다. 이 페이지를 스크롤하고 왼쪽의 탐색의 변경 사항을 볼 수 있습니다.
먼저 구현 된 코드를 켜면 코드를 테스트하여 효과를 확인할 수 있습니다.
<! docType html> <html> <head> <title> bootstrap </title> <meta name = "viewport"content = "width = device-width, Initial-Scale = 1.0"> <!-bootstrap-> <link href = "css/bootstrap.min.css"rel = "<! <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/resption.js/1.3.0/0/respond.min.js" <! [endif]-> <스타일 유형 = "text/css"> .scrollspy-example {height : 200px; 오버플로 : 자동; 위치 : 상대; 테두리 : 1px 솔리드 레드; } </style> </head> <body> <div> <nav id = "navbar-example"robile = "navigation"> <div> <버튼 유형 = "버튼"Data-toggle = "붕괴"data-target = ". </button> <a href = "#"> 프로젝트 이름 </a> </a> </div> <div> <ul> <li> <a href = "#fat">@fat </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <a href = "#"id = "navbardrop1 <b> </b> </a> <ul 역할 = "메뉴"aria-labelledby = "navbardrop1"> <li> <a href = "#One"tabindex = "-1"> one </a> </li> <li> <a href = "#two"tabindex = "-1"> </li> <<li> <a li> <a li> <a li> <a <a <li> <a href. tabindex = "-1"> Three </a> </a> </li> </li> </li> </li> </li> </li> </li> </div> </nav> <div data-offset = "0"data-spy = "scroll"data-target = "#navbar-example"> <h4 id = "fat">@fat </h4> <p> leggings keytar, brunch dolor doll. Pitchfork Yr Enim Lo-Fi가 Qui를 매진하기 전에. Tumblr Farm-to Table 자전거 권리. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney의 사진 부스 3 Wolf Moon irure. Cosby 스웨터 Lomo Jean Shorts, Williamsburg Hoodie 최소 qui 당신은 아마 그들에 대해 들어 본 적이 없을 것입니다. ET Cardigan Trust Fund Culpa Biodiesel Wes Anderson Aesthetic. Nihil Tattooed Accusamus, Cred Irony Biodiesel Keffiyeh artisan ullamco residat. Freegan Bear Aliqua Cupidat McSweeney의 Vero. Cupidat Four Loko Nisi, EA Helvetica Nulla Carles. 문신을 한 Cosby 스웨터 푸드 트럭, McSweeney의 Quis Non Freegan Vinyl. Lo-Fi Wes Anderson +1 복원. Carles 비 미적 운동은 gentrify입니다. Brooklyn Adipisicing Craft Beer Vice Keytar Deserunt. FAP 크래프트 맥주 Deserunt Skateboard EA. Lomo 자전거 권리 Apisicing Banh MI, Velit Ea Sunt Magna Venia의 Next Locavore 싱글 오리핀 커피. High Life Id Vinyl, Echo Park 결과 quis aliquip banh mi pitchfork. Vero vhs est adipisicing. Consectetur Nisi DIY 최소 메신저 백. Cred Ex in, Sustainable Delectus는 Fanny Pack iPhone으로 구성됩니다. </p> <h4 id = "Two"> Two "> Two </h4> <p> IncidIdunt Echo Park에서 공식 Deserunt McSweeney의 Proident Master Cleanse Sapiente Venia. 예외 VHS Elit, Proident Shoreditch +1 Biodiesel Laborum Craft Beer. 싱글 오리핀 커피 길가는 4 개의 로코, Cupidat Terry Richardson Master Cleanse를 구입합니다. 아마도 당신은 아마 그들에게 아트 파티 패니 팩에 대해 들어 본 적이 없을 것입니다. Proident Wolf Nesciunt Sartorial Keffiyeh Eu Banh Mi Sustainable. Elit Wolf Voluptate, Lo-Fi Ea Portland가 4 개의 Loko를 매진하기 전에. Locavore enim nostrud mlkshk Brooklyn nesciunt. Pitchfork Yr Enim Lo-Fi가 Qui를 매진하기 전에. Tumblr Farm-to Table 자전거 권리. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney의 사진 부스 3 Wolf Moon irure. Cosby 스웨터 Lomo Jean Shorts, Williamsburg Hoodie 최소 qui 당신은 아마 그들에 대해 들어 본 적이 없을 것입니다. ET Cardigan Trust Fund Culpa Biodiesel Wes Anderson Aesthetic. Nihil Tattooed Accusamus, Cred Irony Biodiesel Keffiyeh 장인 Ullamco 결과. </p> <p> Keytar Twee Blog, Culpa Messenger Bag allectus 푸드 트럭. Sapiente Synth ID 가정. locavore sed helvetica Cliche Irony, 당신은 아마 그들에 대해 들어 본 적이 없을 것입니다. 그들이 매진되기 전에 노동당 엘리트 장소, Terry Richardson Proident Brunch Nesciunt Quis Cosby 스웨터 패리 아르 Keffiyeh ut helvetica artisan. 가디건 크래프트 맥주 세이탄 레디마 드 벨리트. VHS Chambray Laboris 임시 Veniam. 애니메이션 몰리트 최소 Commodo ullamco Thundercats. </p> </div> </div> <script src = "js/jquery-2.3.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>사용 1-- 데이터 속성을 통해
페이지 요소의 경우 DIV에 추가하면 (일반적으로) DIV에 추가하면 코드를 직접 볼 수 있습니다. 그런 다음 속성 Data-Spy = "Scroll"을 DIV에 추가하여 스크롤 청취 기능을 상단 탐색 표시 줄에 쉽게 추가하십시오. 그런 다음 데이터-표적 속성을 추가하십시오.이 속성의 값은 부트 스트랩에서 .NAV 구성 요소의 상위 요소의 ID 또는 클래스입니다.
다음과 같이 코드를 복사하십시오. <div data-offest = "0"data-spy = "scroll"data-target = "#navbar-example">
...............
</div>
탐색 링크 주소에는 해당 대상이 있어야합니다
탐색 표시 줄의 링크 주소는 동일한 ID 값의 해당 페이지 요소가 있어야합니다.
JavaScript를 통해 사용 2--
JavaScript를 통해 청취 스크롤 시작 :
<script type = "text/javaScript"> $ (function () {$ ( '. scrollspy-example'). scrollspy ({target : '#navbar-example'});}) </script>스타일 클래스를 두루마리의 예기 Div로 배치하여 데이터 표적 속성을 제거하십시오. 또한 마우스 휠을 전환 할 수 있습니다.
2. 방법
.scrollspy ( '새로워')
스크롤 청취 플러그인을 사용할 때는 페이지 요소가 페이지의 DOM에서 추가되거나 삭제 될 때마다 다음과 같이 호출해야합니다.
코드 코드를 다음과 같이 복사하십시오. $ ( '[data-spy = "scroll"]'). 각 (function () {var $ spy = $ (this) .scrollspy ( 'Crofresh')}).
3. 옵션
데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다. 데이터 속성의 경우 Data-Offset = ""와 같은 데이터 다음에 옵션 이름을 넣어야합니다.
4. 이벤트
<script type = "text/javaScript"> $ ( '#navbar-example'). on ( 'activeate.bs.scrollspy', function () {alert (1);}) </script>마지막으로, 참고 : 물론 스크롤 모니터링의 내용에 스크롤 막대를 추가해야합니다. 즉, 스타일을 미리 추가해야합니다.
<스타일 유형 = "text/css"> .Scrollspy-Aexample {height : 200px; 오버플로 : 자동; 위치 : 상대; 테두리 : 1px 솔리드 레드; } </style>DIV 콘텐츠에 특정 높이를 제공하십시오.
위는 부트 스트랩 스크롤 및 관련 콘텐츠를 모니터링하는 학습 노트입니다. 여전히 부트 스트랩을 계속 배우고 싶다면 여기를 클릭하여 학습을 계속할 수 있습니다. 나는 그것이 당신의 학습에 도움이되기를 바랍니다. 또한 wulin.com의 더 흥미로운 콘텐츠에 계속주의를 기울이기를 바랍니다.