<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" /> <title>滚动监听</title> <style type="text/css"> body{ height: 2000px; } h2{ height: 100px; } h3{ height: 100px } #subNav{ position: fixed; top: 0; } .nav a{ color: #666; } .nav ul{ display: none; } .nav .nav>li>a{ padding: 5px 15px; padding-left: 35px; } .nav .active ul{ display: block; } ul .active>a{ border-left: 3px solid red; color: #a94442; font-weight: 600; } .nav .nav .active>a{ border-left: 3px solid red; color: #428bca; padding-left: 32px; } .nav>li>a:hover{ border-left: 1px solid red; color: #428bca; font-weight: 600; background-color: transparent; padding-left: 34px; } </style> </head> <body data-spy="scroll" data-target="#subNav"> <div class="container"> <div class="row"> <div class="col-lg-9"> <div class="section"> <h2 id="gailan">概览</h2> <h3 id="dange">单个还是全局引入</h3> <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。</p> <h3 id="data">data 属性</h3> <h3 id="biancheng">编程方式的 API</h3> <h3 id="bimian">避免命名空间冲突</h3> <h3 id="shijian">事件</h3> <h3 id="weidui">未对禁用 JavaScript 的浏览器提供补救措施</h3> <h3 id="disan">第三方工具库</h3> </div> </div> <div class="col-lg-3"> <div id="subNav" class="navbar-collapse"> <ul class="nav"> <li> <a href="#gailan">概览</a> <ul class="nav"> <li><a href="#dange">单个还是全部引入</a></li> <li><a href="#data">data 属性</a></li> <li><a href="#biancheng">编程方式的 API</a></li> <li><a href="#bimian">避免命名空间冲突</a></li> <li><a href="#shijian">事件</a></li> <li><a href="#weidui">未对禁用 JavaScript 的浏览器提供补救措施</a></li> <li><a href="#disan">第三方工具库</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> </body> </html>
效果图：
