很多時候我們在瀏覽一些網頁的時候，導航條會根據我們瀏覽網頁的進度而發生不同的變化，這種就是滾動監聽。
你的頂欄導航，添加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”是在下拉菜單中，現在“下拉菜單”發生了變化
同樣，點擊里面的標簽，也會有跳轉效果