Bootstrap 附加导航学习笔记
Bootstrap 是一种流行的前端开发框架，提供了大量易于使用和定制化的组件。在本次学习中，我们将重点关注 Bootstrap 的附加导航组件。
1. 简介
附加导航（Affix）是 Bootstrap 的一个组件，可以使页面元素在滚动时固定在特定位置。通常此组件用于网站的导航栏或者其他类似需求，能够提升用户体验并使得操作更为便捷。
2. 实例
下面我们将通过具体实例来演示如何使用 Bootstrap 的附加导航组件。
2.1. HTML
首先我们需要在 HTML 文件中引入 Bootstrap 的样式表和 JavaScript 库。然后，我们需要添加一个导航栏，为其设置相关属性以实现附加导航效果。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Affix</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* 修改一些样式 */
body {
padding-top: 70px;
}
.affix {
top: 70px;
z-index: 9999;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap Affix</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Some content..</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Some content..</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Some content..</p>
</div>
<div id="section4" class="container-fluid">
<h1>Section 4</h1>
<p>Some content..</p>
</div>
<div id="section5" class="container-fluid">
<h1>Section 5</h1>
<p>Some content..</p>
</div>
<script>
/* 初始化页面滚动监听 */
$('body').scrollspy({ target: '#myScrollspy' });
/* 激活附加导航 */
$('#myScrollspy').affix({
offset: {
top: 100
}
});
</script>
</body>
</html>
2.2. 解释
在上述代码中，我们首先引入了 Bootstrap 的样式表和 JavaScript 库。然后，我们添加了一个导航栏，并为其设置 navbar-fixed-top 类以实现固定于页面顶部的效果。此外，我们还通过设置 data-spy="scroll" 和 data-target="#myScrollspy" 属性，启用了页面滚动监听，使得导航栏能够随着页面滚动而自动激活相应链接。
最后，我们通过 JS 代码激活了附加导航组件，并设置了其 offset 属性以控制其在页面滚动时的位置。
3. 总结
Bootstrap 的附加导航组件为我们提供了一种实现页面元素固定效果的简单但强大的方法，让用户的操作更加便捷。在使用时，我们需要合理设置其属性以达到最佳效果。