滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。
在这里，需要引入三个文件：bootstrap.min.css jquery-3.3.1.js bootstrap.min.js
都可以在bootstrap-4.1-3里面找到。
Html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Scroll</title> 6 <link href="bootstrap.min.css" rel="stylesheet"> 7 <link href="style.css" rel="stylesheet" type="text/css"> 8 <script src="jquery-3.3.1.js"></script> 9 <script src="bootstrap.min.js"></script> <!-- 注意文件引入的顺序！ --> 10 </head> 11 <body data-spy="scroll" data-target="#fixed-nav" data-offset="0"> 12 <nav id="fixed-nav" class="navbar fixed-top navbar-inverse" 13 role="navigation"> 14 <ul class="nav nav-pills nav-content"> 15 <li class="nav-item active"> 16 <a class="nav-link" href="#p1">page1</a> 17 </li> 18 <li class="nav-item"> 19 <a class="nav-link" href="#p2">page2</a> 20 </li> 21 <li class="nav-item"> 22 <a class="nav-link" href="#3">page3</a> 23 </li> 24 </ul> 25 </nav> 26 <div id="p1"> <!-- 使用id属性来让a标签链接 --> 27 <p> 28 iOS 是一个由苹果公司开发和发布的手机操作系统。 29 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。 30 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 31 </p> 32 <p> 33 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。 34 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。 35 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 36 </p> 37 <p> 38 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。 39 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。 40 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 41 </p> 42 </div> 43 <div id="p2"> 44 <p> 45 iOS 是一个由苹果公司开发和发布的手机操作系统。 46 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。 47 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 48 </p> 49 <p> 50 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。 51 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。 52 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 53 </p> 54 <p> 55 <br>iOS 是一个由苹果公司开发和发布的手机操作系统。 56 <br>最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。 57 <br>iOS 派生自 OS X，它们共享 Darwin 基础。OS X <br>操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 58 </p> 59 </div> 60 </body> 61 </html>
CSS代码:
body{
position: relative;
} /* 相对定位必须设置，不然会出问题 */
#fixed-nav{
350px;
height: 100px;
background-color:darkgray;
}
#p1{
350px;
height: 600px;
background-color: #ebebeb;
}
#p2{
350px;
margin: 0px 10px;
background-color: #fff;
}
效果图：
---------------------
作者：落花人独立_微雨燕双飞
来源：CSDN
原文：https://blog.csdn.net/qq_41684261/article/details/84106063
版权声明：本文为博主原创文章，转载请附上博文链接！