bootstrap data 属性使用滚动监听（Scrollspy）插件。
bootstrap data 属性使用滚动监听（Scrollspy）插件。
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title>6
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">7
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>8
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>9
</head>10
<body>11
12
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">13
<div class="container-fluid"> 14
<div class="navbar-header">15
<button class="navbar-toggle" type="button" data-toggle="collapse" 16
data-target=".bs-js-navbar-scrollspy">17
<span class="sr-only">切换导航</span>18
<span class="icon-bar"></span>19
<span class="icon-bar"></span>20
<span class="icon-bar"></span>21
</button>22
<a class="navbar-brand" href="#">教程名称</a>23
</div>24
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">25
<ul class="nav navbar-nav">26
<li><a href="#ios">iOS</a></li>27
<li><a href="#svn">SVN</a></li>28
<li class="dropdown">29
<a href="#" id="navbarDrop1" class="dropdown-toggle" 30
data-toggle="dropdown">Java31
<b class="caret"></b>32
</a>33
<ul class="dropdown-menu" role="menu" 34
aria-labelledby="navbarDrop1">35
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>36
<li><a href="#ejb" tabindex="-1">ejb</a></li>37
<li class="divider"></li>38
<li><a href="#spring" tabindex="-1">spring</a></li>39
</ul>40
</li>41
</ul>42
</div>43
</div> 44
</nav>45
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 46
style="height:200px;overflow:auto; position: relative;">47
<h4 id="ios">iOS</h4>48
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 49
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。50
</p>51
<h4 id="svn">SVN</h4>52
<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。53
</p>54
<h4 id="jmeter">jMeter</h4>55
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java