滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標。
在這裏，需要引入三個文件：bootstrap.min.css jquery-3.3.1.js bootstrap.min.js
都可以在bootstrap-4.1-3裏面找到。
Html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scroll</title> <link href="bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.3.1.js"></script> <script src="bootstrap.min.js"></script> <!-- 注意文件引入的順序！ --> </head> <body data-spy="scroll" data-target="#fixed-nav" data-offset="0"> <nav id="fixed-nav" class="navbar fixed-top navbar-inverse" role="navigation"> <ul class="nav nav-pills nav-content"> <li class="nav-item active"> <a class="nav-link" href="#p1">page1</a> </li> <li class="nav-item"> <a class="nav-link" href="#p2">page2</a> </li> <li class="nav-item"> <a class="nav-link" href="#3">page3</a> </li> </ul> </nav> <div id="p1"> <!-- 使用id屬性來讓a標籤鏈接 --> <p> iOS 是一個由蘋果公司開發和發佈的手機操作系統。 <br>最初是於 2007 年首次發佈 iPhone、iPod Touch 和 AppleTV。 <br>iOS 派生自 OS X，它們共享 Darwin 基礎。OS X <br>操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <p> <br>iOS 是一個由蘋果公司開發和發佈的手機操作系統。 <br>最初是於 2007 年首次發佈 iPhone、iPod Touch 和 AppleTV。 <br>iOS 派生自 OS X，它們共享 Darwin 基礎。OS X <br>操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <p> <br>iOS 是一個由蘋果公司開發和發佈的手機操作系統。 <br>最初是於 2007 年首次發佈 iPhone、iPod Touch 和 AppleTV。 <br>iOS 派生自 OS X，它們共享 Darwin 基礎。OS X <br>操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> </div> <div id="p2"> <p> iOS 是一個由蘋果公司開發和發佈的手機操作系統。 <br>最初是於 2007 年首次發佈 iPhone、iPod Touch 和 AppleTV。 <br>iOS 派生自 OS X，它們共享 Darwin 基礎。OS X <br>操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <p> <br>iOS 是一個由蘋果公司開發和發佈的手機操作系統。 <br>最初是於 2007 年首次發佈 iPhone、iPod Touch 和 AppleTV。 <br>iOS 派生自 OS X，它們共享 Darwin 基礎。OS X <br>操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <p> <br>iOS 是一個由蘋果公司開發和發佈的手機操作系統。 <br>最初是於 2007 年首次發佈 iPhone、iPod Touch 和 AppleTV。 <br>iOS 派生自 OS X，它們共享 Darwin 基礎。OS X <br>操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> </div> </body> </html>
CSS代碼:
body{ position: relative; } /* 相對定位必須設置，不然會出問題 */ #fixed-nav{ width: 350px; height: 100px; background-color:darkgray; } #p1{ width: 350px; height: 600px; background-color: #ebebeb; } #p2{ width: 350px; margin: 0px 10px; background-color: #fff; }
效果圖：
