Bootstrap3.0學習第二十輪(JavaScript外掛——滾動監聽)
阿新 • • 發佈：2019-01-01
前言
本文主要來學習一下JavaScript外掛--下拉選單。
滾動監聽
案例
滾動監聽外掛可以根據滾動條的位置自動更新所對應的導航標記。你可以試試滾動這個頁面，看看左側導航的變化。
先把實現的程式碼上了，你可以通過測試程式碼先來看看效果。
View Code
然後執行後，在內容下，也就是有滾動條哪裡滾動滑鼠齒輪，即可看到效果。
用法1--通過data屬性
通過為需要監聽的頁面元素（一般是<body>）不過在上面新增在了Div上面，你可以自己看看程式碼就明白了。然後給div新增屬性data-spy="scroll"就可很輕鬆的為頂部導航條新增滾動監聽功能。然後為其新增data-target
.nav元件的父元素的ID或class。
<div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example"> ........ </div>
導航連結地址必須有對應的目標
導航條內的連結地址必須有對應的頁面元素具有同樣的ID值。例如，
<a href="#home">home</a>必須對應DOM中例如<div id="home"></div>。
用法2--通過JavaScript
通過JavaScript啟動滾動監聽：
<script type="text/javascript"> $(function () { $('.scrollspy-example').scrollspy({ target:'#navbar-example' }); }) </script>
通過將樣式類為scrollspy-example的div，去掉它的data-target屬性。這樣同樣可以進行滑鼠滾輪的切換。
方法
.scrollspy('refresh')
使用滾動監聽外掛時，每當頁面中從DOM中增加或刪除頁面元素時，都需要呼叫此方法以，如下：
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })
不過暫時還沒用到。
選項
可以將選項通過data屬性或JavaScript傳遞。對於data屬性，需要將選項名稱放到data-之後，例如data-offset=""。
事件
<script type="text/javascript"> $('#navbar-example').on('activate.bs.scrollspy', function () { alert(1); }) </script>
最後注意:針對滾動監聽的內容當然要新增滾動條，也就是要預先新增樣式
<style type="text/css"> .scrollspy-example { height: 200px; overflow: auto; position: relative; border:1px solid red; } </style>
給與Div內容一定的高度。
總結
糾結了很久，就是因為針對內容那裡沒有滾動條。這一點一定記住勒。