利用Bootstrap 开发工具实现滚动监听
（此文只做学习路上的归纳分享总结用，如有侵权，请联系我删除）
使用滚动监听，比较特殊，要在body中设置scroll，以及触点。
很好理解，因为滚动是多对整个网页，而不是之前常用“container”类
<body data-spy="scroll" data-target="#myNav">
data-spy="affix"，设置附加导航。
nav nav-pills nav-stacked，胶囊式导航，用来设置样式。
通过id进行触电绑定
<div class="col-xs-2">
<div data-spy="affix" data-offset-top="0" id="myNav">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#ch1">第一章</a>
</li>
<li>
<a href="#ch2">第二章</a>
</li>
<li>
<a href="#ch3">第三章</a>
</li>
<li>
<a href="#ch4">第四章</a>
</li>
</ul>
</div>
</div>
总代码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compaitible" content="IE=edge">
<title>Daohang</title>
<link rel="stylesheet" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#myNav">
<div class="container">
<h1>鱼C密传</h1>
<div class="row">
<div class="col-xs-10">
<h3 id="ch1">第一章：鱼C新纪元</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<h3 id="ch2">第二章：程序猿的世界</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<h3 id="ch3">第三章：初出茅庐的神兽转世</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<h3 id="ch4">第四章：突破第三世界</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi culpa cumque dolor eius, expedita facilis iure iusto laboriosam laudantium, minima molestias, nesciunt officiis perspiciatis praesentium quis quisquam ullam voluptatum.
</p>
</div>
<div class="col-xs-2">
<div data-spy="affix" data-offset-top="0" id="myNav">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#ch1">第一章</a>
</li>
<li>
<a href="#ch2">第二章</a>
</li>
<li>
<a href="#ch3">第三章</a>
</li>
<li>
<a href="#ch4">第四章</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
来源：https://www.cnblogs.com/joker-18/p/12373133.html