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标签需有足够多的东西 哈哈哈哈 望见谅
版权声明：本文为weixin_42634971原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。