Bootstrap Affix插件：打造固定位置导航
117 浏览量
更新于2024-09-03
收藏 334KB PDF 举报
"Bootstrap 附加导航（Affix）插件是一种功能强大的工具，它使得网页上的某些元素（通常是导航菜单）能够固定在页面的特定位置，无论用户如何滚动页面。这个插件允许开发者创建交互式的导航体验，比如始终保持在视窗可见范围内的侧边栏或者顶部菜单。Bootstrap 的 Affix 插件依赖于 jQuery，因此在使用前需要确保引入了 jQuery 库。
Bootstrap Affix 插件的使用分为两种方式：通过 data 属性和通过 JavaScript API。对于不熟悉 JavaScript 的开发者，使用 data 属性是非常方便的。只需在需要应用 Affix 效果的 `<div>` 元素上添加 `data-spy="affix"` 属性，并利用 `data-offset-*` 属性来设置元素在页面滚动到何处时变为固定的阈值。例如，`data-offset-top` 可以指定元素距离页面顶部多远时变为固定，`data-offset-bottom` 可以设置在距离页面底部多少距离时解除固定。
以下是一个简单的 HTML 实例，展示了如何通过 data 属性使用 Bootstrap Affix：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Affix 插件示例</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
/* 自定义样式 */
ul.nav-tabs {
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child {
border-top: none;
}
</style>
</head>
<body>
<!-- 需要应用 Affix 效果的元素 -->
<ul class="nav nav-tabs" data-spy="affix" data-offset-top="100">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
<!-- 页面内容 -->
<div id="section1">Section 1 content...</div>
<div id="section2">Section 2 content...</div>
<div id="section3">Section 3 content...</div>
</body>
</html>
```
在这个例子中，`ul.nav-tabs` 会在滚动到距离页面顶部 100 像素的位置时变为固定在屏幕的一侧。当页面继续向下滚动并超出 `data-offset-bottom` 指定的值时，这个导航菜单将恢复其原始位置。
如果希望通过 JavaScript API 来控制 Affix 行为，可以使用 `$(element).affix(options)` 方法，其中 `options` 是一个包含配置选项的对象，如 `offset` 参数用于设置元素的固定和解除固定的触发位置。例如：
```javascript
var myAffixedElement = $('#myElement');
myAffixedElement.affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true));
}
}
});
```
这段代码中，`myElement` 在滚动到距离页面顶部 100 像素时变为固定，且在底部距离页面底部与 `.footer` 元素高度相等的位置解除固定。
总结来说，Bootstrap 的 Affix 插件提供了灵活的方法来创建固定位置的导航和其他元素，增强用户的浏览体验。通过适当的配置和样式调整，可以实现各种各样的布局效果，让网站更加动态和吸引人。在实际开发中，开发者可以根据项目需求选择合适的方式来应用 Affix 功能，提升网页的用户体验。"
Bootstrap 附加导航（附加导航（Affix）插件实例详解）插件实例详解
附加导航（Affix）插件允许某个
固定在页面的某个位置。接下来通过本文给大家介绍Bootstrap 附加导航（Affix）插件实例详解，感兴趣的朋友一起看看吧
附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面
点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。
用法用法
您可以通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。
通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
实例实例
下面的实例演示了通过 data 属性使用附加导航（Affix）插件的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 附加导航（Affix）插件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
/* Custom Styles */
ul.nav-tabs{
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li{
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child{
border-top: none;
}
ul.nav-tabs li a{
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a{
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a{
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix{
top: 30px; /* Set the top position of pinned element */
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</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 class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">
<h2 id="section-1">第一部分</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id="section-2">第二部分</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p>
<hr>
<h2 id="section-3">第三部分</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
<hr>
<h2 id="section-4">第四部分</h2>
下载后可阅读完整内容，剩余3页未读，立即下载
2021-07-03 上传
2020-09-02 上传
2020-12-13 上传
2021-01-19 上传
2021-01-19 上传
2020-11-22 上传
2021-01-19 上传
2020-12-29 上传
2020-10-21 上传
weixin_38663526
- 粉丝: 3
- 资源: 940
我的内容管理
展开
最新资源
- 高清艺术文字图标资源，PNG和ICO格式免费下载
- mui框架HTML5应用界面组件使用示例教程
- Vue.js开发利器：chrome-vue-devtools插件解析
- 掌握ElectronBrowserJS：打造跨平台电子应用
- 前端导师教程：构建与部署社交证明页面
- Java多线程与线程安全在断点续传中的实现
- 免Root一键卸载安卓预装应用教程
- 易语言实现高级表格滚动条完美控制技巧
- 超声波测距尺的源码实现
- 数据可视化与交互：构建易用的数据界面
- 实现Discourse外聘回复自动标记的简易插件
- 链表的头插法与尾插法实现及长度计算
- Playwright与Typescript及Mocha集成：自动化UI测试实践指南
- 128x128像素线性工具图标下载集合
- 易语言安装包程序增强版：智能导入与重复库过滤
- 利用AJAX与Spotify API在Google地图中探索世界音乐排行榜
