很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听。
你的顶栏导航,添加data-spy="scroll"
到您想要刺探(最典型的是这将是该元素<body>
)。然后添加data-target
任何引导的父元素的ID或类属性.nav
的组件。
我们来写一个基本的实例
先引入CSS文件
<link href="bootstrap.min.css" rel="stylesheet">
我们需要在<body>中添加属性data-spy="scroll" data-target=".navbar" data-offset="70"来实现滚动监听
data-target=".navbar" :这是一个滚动条,依赖于导航条
<body data-spy="scroll" data-target=".navbar" data-offset="70">
...
</body>
添加一个容器div,创建导航条
navbar-fixed-top属性使导航条一直处于浏览器顶部
<div class="container-fluid">:这是一个充满全屏的容器
navbar-default navbar-collapse:这是样式
id="myscrollspy":是用来索引的
<ul><li>用来做导航栏
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myscrollspy">
<ul class="nav navbar-nav">
<li><a href="#">@qwe</a></li>
<li><a href="#">@asd</a></li>
</ul>
</div>
</div>
</nav>
</div>
效果
在容器div中添加应该要跳转的内容
先写一个<hn>标签,在里面指定id,再添加内容
为方便,随便写点内容,然后把<a>中的href属性修改为“#qwe”和“#asd”(因为只在同一个页面内跳转,注意要用“#”来索引)
<h2 id="qwe">@qwe</h2>
<p>qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeqhwduqhuwduqwg
asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd
asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsasduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd
asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgduadusdkagsudguasgdukasgdukagsudgauskgdk</p>
<h2 id="asd">@asd</h2>
<p>qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeqhwduqhuwduqwg
asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgaus
asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uasssssssssssssssssasduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd
asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgdsssssssshdsuadusdkagsudguasgdu
uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgdkgdk</p>
然后我们来添加js代码
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
实行查看效果
效果不明显,那是因为内容不够多,没有使浏览器产生上下的滚动条,需要添加新的内容
既然这样,顺便把下拉菜单也同时说了
在<ul>中添加新代码作为下拉菜单
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
效果
然后为其添加新的内容
(省略,使内容多到让浏览器产生上下的滚动条,同时也要仿照上面的,记得在<hn>标签中添加id索引)
注意红框内,
现在我们向下拉,注意红框内,@asd那里发生了变化
再继续往下,由于“one”是在下拉菜单中,现在“下拉菜单”发生了变化
同样,点击里面的标签,也会有跳转效果