Bootstrap Affix和过渡效果插件的详细使用【前端Bootstrap框架】
【摘要】 @[toc] Affix插件附件插件允许指定<div>固定在页面上的某个位置。一个常见的例子是社交图标。它们将从某个位置开始，但当页面单击标记时，<div>将锁定在某个位置，并且不会与页面的其余部分一起滚动。如果要单独引用此插件的功能，则需要引用affix js或者，如“bootstrap插件概述”，可以bootstrap JS或bootstrap.min.JS的压缩版本。通过数据属性：如果...
@[toc]
Affix插件
附件插件允许指定<div>固定在页面上的某个位置。一个常见的例子是社交图标。它们将从某个位置开始，但当页面单击标记时，<div>将锁定在某个位置，并且不会与页面的其余部分一起滚动。
如果要单独引用此插件的功能，则需要引用affix js或者，如“bootstrap插件概述”，可以bootstrap JS或bootstrap.min.JS的压缩版本。
通过数据属性：如果需要向元素添加额外的导航（粘贴）行为，则只需向需要监视的元素添加数据。使用偏移来定义何时切换图元的锁定和移动。
<style>
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>
<script>
$(document).ready(function(){
$("#myNav").affix({
offset: {
top: 125
}
});
});
</script>
</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" id="myNav">
<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>
通过数据属性使用附加导航（粘贴）插件：
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
Affix插件运行结果如下：
通过CSS定位
在上述两种使用附件插件的方法中，必须通过CSS定位内容。
词缀插件在三个类之间切换，每个类都呈现一个特定的状态：
粘贴固定顶部和。
固定底部。
按照以下步骤为这三种状态设置自己的CSS（独立于此插件）。
在开始时，插件添加了。固定顶部以指示图元位于其最顶部位置。此时不需要CSS定位。
在添加了附加导航（词缀）的元素中滚动时，应触发实际的附加导航（词缀）。
此时，修复程序将替换。固定顶部和设置位置：固定；（由bootstrap的CSS代码提供）。
如果定义了底部偏移，当滚动到达此位置时，更换用.Fix-bottom固定。由于偏移量是可选的，如果设置了偏移量，则需要同时设置适当的CSS。在这种情况下，添加位置：绝对；必要时；
一些选项通过数据属性或JavaScript传递。下表列出了这些选项：
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number | function | object 默认值：10 |
data-offset | 当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。 |
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区），文章链接，文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：cloudbbs@huaweicloud.com进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
- 点赞
- 收藏
- 关注作者
评论（0）