Bootstrap实现滚动监听
代码奉上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例6</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<script src="lib/jquery/jquery-1.12.4.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!--菜单容器-->
<div id="selector">
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#name1">@fat</a></li>
<li><a href="#name2">@mdo</a></li>
<li><a href="#name3">one</a></li>
<li><a href="#name4">two</a></li>
</ul>
</nav>
</div>
<!--滚动监听区域-->
<div data-offset="0" data-target="#selector" data-spy="scroll" style="height: 200px;overflow: auto;">
<h4 id="name1">@fat</h4>
<p>滚动监听 滚动监听 滚动监听滚动监听 滚动监听 滚动监听 <br>滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 </p>
<h4 id="name2">@mdo</h4>
<p>滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 </p>
<h4 id="name3"> one</h4>
<p>滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 </p>
<h4 id="name4"> two</h4>
<p>滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 滚动监听 </p>
</div>
</body>
</html>
每个p标签需有足够多的东西 哈哈哈哈 望见谅