利用bootstrap制作滚动监听

滚动监听（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
版权声明：本文为博主原创文章，转载请附上博文链接！