bootstrap之滾動監聽

作者原創，未經允許，拒絕轉載。

首先做一個導航，這個地方有一個 class="navbar-example" 是用來做綁定的

<div class="navbar-example">
    <!-- 導航 a中href="#one" 來尋找錨點-->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#one">one</a></li>
      <li role="presentation"><a href="#two">two</a></li>
      <li role="presentation"><a href="#three">three</a></li>
    </ul>
</div>

然后做滾動監聽空間，通過data-target=".navbar-example"，找到導航並與之綁定，監聽空間必須添加css position: relative;

<div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">
  <h3 id ="one">one</h3>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <p>oneoneoneoneone</p>
  <h3 id ="two">two</h3>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <p>twotwotwotwotwo</p>
  <h3 id ="three">three</h3>
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>  
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>
  <p>threethreethree</p>
</div>

data-spy="scroll":監聽事件，滾動條
data-target=".navbar-example" 綁定的導航

總結：創建一個導航，設置一個標記class="navbar-example" ，與監聽空間data-target=".navbar-example"進行綁定，讓a找到里面的id，實現點擊a跳到對應的id位置，其實就是錨點。添加監聽滾動事件，當到達id的位置時，把class="active"轉移到相應的a上，實現滾動到某一id，導航中相應的a發生改變。

博客已搬家 技術寇的分享