滚动监听（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;}
效果图：
更多推荐
Bootstrap
发布评论