附加导航
2018-09-26 本文已影响0人
子却
附加导航（Affix）插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>ASTICK</h1>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li><a href="#1">第一部分</a></li>
<li><a href="#2">第二部分</a></li>
<li><a href="#3">第三部分</a></li>
</ul>
</div>
<div class="col-xs-9">
<div id="1" style="height:900px;border:1px solid lightblue;">
<h1 class="text-center">欢迎来到Astick</h1>
</div>
<div id="2" style="height:900px;border:1px solid lightblue;">
<h1 class="text-center">这是一个demo</h1>
</div>
<div id="3" style="height:900px;border:1px solid lightblue;">
<h1 class="text-center">开始练习</h1>
</div>
</div>
</div>
</div>
</div>
</body>
step1.<body data-spy="scroll" data-target="#myScrollspy"> 为<body>添加监听事件，并将其指定到<div>导航标签；
step2.<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125"> 用一个无序列表来承载导航标签；
- data-spy="affix" 表示启用附加导航插件；
- data-offset-top="125" 表示偏移量，也就是滚动条移动后，距离顶部125像素时，导航栏固定显示；
- （data-offset-bottom="125" 滚动条移动后，距离底部125像素时，导航栏固定显示；）
step3.<li><a href="#1">第一部分</a></li> 每个<a>链接都得链接到相对应的内容的id；
step4.编写导航内容。
