為什么80%的碼農都做不了架構師？>>> ??

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

導航條示例

滾動監聽插件會根據滾動的位置，自動更新導航條的目標。滾動在導航條下面的區域，查看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…? })

轉載于:https://my.oschina.net/asktao/blog/647372

總結

以上是生活随笔為你收集整理的4.18、Bootstrap V4自学之路-----内容---滚动监听的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。