bootstrap之滚动监听

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发生改变。

博客已搬家 技术寇的分享