This article introduces Bootstrap scroll monitoring for everyone to learn. The specific content is as follows
Scroll monitoring accompanied by scrolling of scroll bars, list items are constantly switched and activated.
<!-- 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 pulldown behavior --> <a href="#" data-toggle="dropdown" dropdown menu<b></b></a> <ul> <li><a href="#3">List 3</a></li> <li><a href="#4">List 4</a></li> <li><a href="#5">List 5</a></li> </li> </li> </div> </div><!-- data-spy="scroll" set data attributes for the listening object --><!-- data-target="#menu" set listen object --><!-- data-offset="30" set offset --><div data-spy="scroll" data-target="#menu" data-offset="30"> <h3 id="1">List 1</h3> <p><img src="img/1.jpg"></p> <h3 id="2">List 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">List 4</h3> <p><img src="img/4.jpg"></p> <h3 id="5">List 5</h3> <p><img src="img/5.jpg"></p></div>
Scroll monitoring
<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> <li> <a href="#2">List2</a></li> <li> <a href="#" data-toggle="dropdown">Drop down menu<b></b></a> <ul> <li><a href="#3">List3</a></li> <li><a href="#4">List4</a></li> <li><a href="#5">List5</a></li> </li> </li> </ul></div><!-- data-spy="scroll" sets data attributes for listening objects --><!-- data-target="#menu" sets listening objects --><!-- data-offset="30" sets offset --><div > <h3 id="1">List 1</h3> <p><img src="img/1.jpg"></p> <h3 id="2">List 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">List 4</h3> <p><img src="img/4.jpg"></p> <h3 id="5">List 5</h3> <p><img src="img/5.jpg"></p></div>
CSS Style
#navbar { position: fixed; right: 10px; top: 50px; width: 200px; background-color: #fff;}Called:
The first one: use data-spy=”scroll” method, the above is
The second type: use JS calls
HTML just removes data-spy=”scroll”
$(function () { $("body").scrollspy(); // When a new navigation bar item is activated, $("body").on("activate", function (e) { if (e.target && $(e.target).hasClass("dropdown")){ $(e.target).children("ul.dropdown-menu").css("display", "block"); } else { $(e.target).parent().find("ul.dropdown-menu").css("display", "none"); } })});If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.