滚动监听插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本实现是随着滚动,基于滚动条的位置向导航栏添加.active。
1.用法
(1)通过data属性,向您想要监听的元素添加data-spy=“scroll”
(2)通过JavaScript,调用.scrollspy()函数
$('body').scrollspy({target:'.navbar-example'})
2.例子
<style>
body {
position: relative;
}
#html{height:400px; background-color:#3333CC;}
#css{height:400px; background-color:gray;}
#jquery{height:400px; background-color:#3333CC;}
#ajax{height:400px; background-color:gray;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" >
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header"> <a class="navbar-brand" href="#">刘小妞的博客</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#html">html</a></li>
<li><a href="#css">css</a></li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> javascript <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#jquery">jquery</a></li>
<li><a href="#ajax">ajax</a></li>
</ul>
</li>
</ul>
</div>
<!--导航栏中每个块-->
</nav>
<div id="html">
<h1>html</h1>
<p>html部分</p>
</div>
<div id="css">
<h1>css</h1>
<p> css部分</p>
</div>
<div id="jquery">
<h1>jquery</h1>
<p>jquery部分</p>
</div>
<div id="ajax">
<h1>ajax</h1>
<p>ajax部分</p>
</div>