Of Stack

Learn the method of Bootstrap rolling monitoring and calling

  • 2021-07-01 06:28:03
  • OfStack

This article introduces Bootstrap rolling monitoring for everyone to learn. The specific contents are as follows

Scroll monitoring is accompanied by the scrolling of the scroll bar, and the list items are constantly switched and activated 


<!-- id="menu"  For data-target="#menu"  Listening object of -->
<!-- navbar navbar-inner nav navbar-fixed-top  Fixed navigation bar  -->
<div id="menu" class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="nav">
      <li><a href="#1"> List 1</a></li>
      <li><a href="#2"> List 2</a></li>
      <!-- dropdown dropdown-menu  Drop-down menu  -->
      <li class="dropdown">
        <!-- data-toggle="dropdown"  Invoke the drop-down behavior  -->
        <a href="#" data-toggle="dropdown"> Drop-down menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#3"> List 3</a></li>
          <li><a href="#4"> List 4</a></li>
          <li><a href="#5"> List 5</a></li>
        </ul>
      </li>
    </div>
  </div>
</div>
<!-- data-spy="scroll" Set for listening objects data Attribute  -->
<!-- data-target="#menu" Setting Listening Objects  -->
<!-- data-offset="30" Setting Offset  -->
<div class="scrollspy" 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 class="nav nav-pills nav-stacked">
    <li><a href="#1"> List 1</a></li>
    <li><a href="#2"> List 2</a></li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown"> Drop-down menu  <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#3"> List 3</a></li>
        <li><a href="#4"> List 4</a></li>
        <li><a href="#5"> List 5</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- data-spy="scroll" Set for listening objects data Attribute  -->
<!-- data-target="#menu" Setting Listening Objects  -->
<!-- data-offset="30" Setting Offset  -->
<div class="scrollspy" >
  <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;
}

Call:
Type 1: Use the data-spy= "scroll" method, as described above
Type 2: Use JS to call
HTML only remove data-spy= "scroll" 


$(function () {
  $("body").scrollspy();
  //  When 1 Triggered 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 want to learn more, you can click here to learn, and then attach a wonderful topic for you: Bootstrap Learning Tutorial

The above is the whole content of this article, hoping to help everyone learn javascript programming.

Related articles: