이 기사는 모든 사람이 배울 수있는 부트 스트랩 스크롤 모니터링을 소개합니다. 특정 내용은 다음과 같습니다
스크롤 모니터링 스크롤 막대의 스크롤과 함께 스크롤 모니터링, 목록 항목은 지속적으로 전환 및 활성화됩니다.
<!-- id="menu" is the listening object for data-target="#menu" --><!-- navbar navbar-inner nav navbar-fixed-top Fixed navigation bar --><div> <div> <div> <li><a href="#1">List1</a></li> <li><a href="#2">List2</a></li> <!-- dropdown dropdown-menu DROPDOWN-MENU DROPDOWN-MENU CALL PUTRDOWN 동작-> <a href = "#"data-toggle = "dropdown"드롭 다운 메뉴 <b> </b> </a> <ul> <li> <a href = "#3"> 목록 3 </a> </li> <li> <a href = "#4"> 목록 4 </a> </li> <a href =. 5 </a> </li> </li> </li> </li> </div> </div> </div> <!-Data-Spy = "스크롤"청취 개체에 대한 데이터 속성 설정-> <! <! <!-data-target = "#menu"설정 청취 객체-> <!-데이터 오프셋 = "30"dataporpset = "30" "30" "30" "30" 1 </h3> <p> <img src = "img/1.jpg"> </p> <h3 id = "2"> 목록 2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3"> 목록 3 </h3> <p> img src = "img/3.jpg"> </p> </pg "> id = "4"> 목록 4 </h3> <p> <img src = "img/4.jpg"> </p> <h3 id = "5"> 목록 5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
스크롤 모니터링
<body data-spy = "scroll"data-target = "#navbar"data-offset = "0"> <div id = "navbar"> <ul> <li> <a href = "#1"> list1 </a> </li> <li> <a href = "#2"> list2 </a> <li> <a href = "#2"> ">"> "> </li> <a href = "#"data-toggle = "dropdown"> 드롭 다운 메뉴 <b> </b> </a> <ul> <li> <a href = "#3"> list3 </a> </li> <li> <a href = "#4"> list4 </a> </li> <li> <a href = "#5"> </li> </li> </li> </li> </li> </li> </ul> </div> <!-Data-Spy = "Scroll"청취 객체에 대한 데이터 속성을 설정합니다-> <!-data-target = "#메뉴"청취 객체를 설정합니다-> <!-data-offerset = "30"sets offset-> <div> <h3 id = "1 </h3> <p> img src ="img/1.jpg "> </pg"> </pg. id = "2"> 목록 2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3"> list 3 </h3> <p> <img src = "img/3.jpg"> </p> <h3 id = "4"> 목록 4 </h3> <p> <img src = "img/4.jp"> <h3 id = "5"> 목록 5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
CSS 스타일
#NAVBAR {위치 : 고정; 오른쪽 : 10px; 상단 : 50px; 너비 : 200px; 배경색 : #fff;}라고 불리는:
첫 번째는 Data-Spy =”Scroll”메소드를 사용하십시오
두 번째 유형 : JS 호출을 사용합니다
html 그냥 data-spy = "스크롤"을 제거합니다.
$ (function () {$ ( "body"). scrollspy (); // 새로운 탐색 막대 항목이 활성화 될 때, $ ( "body"). on ( "activate", function (e) {if (e.target && $ (e.target)) {$ (e.target) .Children ( "ul.dropdown) ("ul.dropdown). "block")} else {$ (e.target) .parent (). css ( "display", "none");여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.