<!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>
效果图：
时间： 2024-10-13 11:43:56