標籤：
很多時候我們在瀏覽一些網頁的時候，導航條會根據我們瀏覽網頁的進度而發生不同的變化，這種就是滾動監聽。
你的頂欄導航，添加data-spy="scroll"到您想要刺探（最典型的是這將是該元素<body>）。然後添加data-target任何引導的父元素的ID或類屬性.nav的組件。
我們來寫一個基本的執行個體
先引入CSS檔案
<link href="bootstrap.min.css" rel="stylesheet">
我們需要在<body>中添加屬性data-spy="scroll" data-target=".navbar" data-offset="70"來實現滾動監聽
data-target=".navbar" ：這是一個捲軸，依賴於導航條
<body data-spy="scroll" data-target=".navbar" data-offset="70"> ... </body>
添加一個容器div，建立導航條
navbar-fixed-top屬性使導航條一直處於瀏覽器頂部
<div class="container-fluid">：這是一個充滿全屏的容器
navbar-default navbar-collapse：這是樣式
id="myscrollspy"：是用來索引的
<ul><li>用來做導覽列
<div class="container"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myscrollspy"> <ul class="nav navbar-nav"> <li><a href="#">@qwe</a></li> <li><a href="#">@asd</a></li> </ul> </div> </div> </nav> </div>
效果
在容器div中添加應該要跳轉的內容
先寫一個<hn>標籤，在裡面指定id，再新增內容
為方便，隨便寫點內容，然後把<a>中的href屬性修改為“#qwe”和“#asd”（因為只在同一個頁面內跳轉，注意要用“#”來索引）
<h2 id="qwe">@qwe</h2> <p>qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeqhwduqhuwduqwg asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsasduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgduadusdkagsudguasgdukasgdukagsudgauskgdk</p> <h2 id="asd">@asd</h2> <p>qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeqhwduqhuwduqwg asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgaus asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uasssssssssssssssssasduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgdsssssssshdsuadusdkagsudguasgdu uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgdkgdk</p>
然後我們來添加js代碼
<script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>
實行查看效果
效果不明顯，那是因為內容不夠多，沒有使瀏覽器產生上下的捲軸，需要添加新的內容
既然這樣，順便把下拉式功能表也同時說了
在<ul>中添加新代碼作為下拉式功能表
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉式功能表<b class="caret"></b></a> <ul class="dropdown-menu" role="menu"> <li><a href="#one" tabindex="-1">one</a></li> <li><a href="#two" tabindex="-1">two</a></li> <li><a href="#three" tabindex="-1">three</a></li> </ul> </li>
效果
然後為其添加新的內容
（省略，使內容多到讓瀏覽器產生上下的捲軸，同時也要仿照上面的，記得在<hn>標籤中添加id索引）
注意紅框內，
現在我們向下拉，注意紅框內，@asd那裡發生了變化
再繼續往下，由於“one”是在下拉式功能表中，現在“下拉式功能表”發生了變化
同樣，點擊裡面的標籤，也會有跳轉效果
Bootstrap入門（二十六）JS外掛程式3：滾動監聽
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
