滚动监听（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;
}
效果图：
---------------------
作者：落花人独立_微雨燕双飞
来源：CSDN
原文：https://blog.csdn.net/qq_41684261/article/details/84106063
版权声明：本文为博主原创文章，转载请附上博文链接！