4.1八、Bootstrap V4自學之路-----內容---滾動監聽

整體來講，用起來不是特別滿意，先放一放吧。

導航條示例

滾動監聽插件會根據滾動的位置，自動更新導航條的目標。滾動在導航條下面的區域，查看active類的改變。彈出菜單的子項也一樣會被高亮。

<nav id="navbar-example2" class="navbar navbar-default" role="navigation">
  <h3 class="navbar-brand">Project Name</h3>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
    <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item active" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>

<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" style="position:relative;height: 15rem;overflow:auto;">
  <h4 id="fat">@fat</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
  <h4 id="mdo">@mdo</h4>
  <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
  <h4 id="one">one</h4>
  <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
  <h4 id="two">two</h4>
  <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
  <h4 id="three">three</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
  <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
  </p>
</div>

注意：下一行的sytle屬性。

<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" style="position:relative;height: 15rem;overflow:auto;">

PS：如圖所示滾動的時候確實會動。但存在一個bug。

是當目標的#id=fat這行，到達頁面<nav>時，纔會觸發效果。因此若是手動點@mdo，則導航欄active還在@fat元素上。

但當整個頁面存在滾動條時，#id=fat才能在可視範圍的最上方。

因而我想到換一種方法。

但依然無用。或許，換一種方法替代。

@mdo 的上一行創建一個空的標籤，#id換成@mdo的方法。這樣是否是就能夠了呢？

上圖是滾動時的樣子。感受上還ok。可是當點擊後，就差強人意了。

下圖是點擊後的效果。

用法

須要Bootstrap導航條

滾動監聽如今須要用到Bootstrap nav 組件 以適當地高亮激活的連接。

須要相對位置

不管如何應用這個方法，滾動監聽須要在你要監聽的元素上用position:relative;。在多數狀況下，這個須要監聽的元素就是<body>。當在除了<body>以外的元素上進行滾動監聽時，請確保應用了一個height設置以及overflow-y:scroll;。

利用data屬性

要想方便地在你的頂部導航條上添加滾動監聽，請在你想監聽的元素上添加data-spy="scroll"（最典型的就是<body>）。而後添加data-target屬性，屬性值是任何Bootstrap.nav組件的父元素的ID或類。

body {
   position: relative; 
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

利用JavaScript

在你的CSS中添加了position: relative;以後，利用JavaScript調用滾動監聽：

$('body').scrollspy({ target: '#navbar-example' })

導航條連接必須擁有可解析的ID目標。

不可見的目標元素會被忽略。

方法

.scrollspy(‘refresh’)

在使用滾動監聽的同時，若是在DOM中添加或移除了元素，你須要調用刷新方法，以下所示：

$('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh') 
})

選項

能夠利用data屬性或者JavaScript傳遞選項。若是用data屬性，請把選項名追加到data-後面，好比說寫成data-offset=""。

名稱	類型	默認值	description
offset	number	10	從頂部滾下來多少像素開始計算位置

事件

事件類型	描述
activate.bs.scrollspy	當一個新項被滾動監聽激活時，會觸發該事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something… 
})