在Bootstrap的文档中,关于 Affix用法 并没用做详细的示例,只写到此功能请参照本文档右侧导航。可能很多人看了之后依然不知道这个 Affix 插件到底该怎么用!今天,Specs 就通过一个详细的示例来为大家讲解下 Affix的用法。
Affix 共有两种用法:一种是通过 data 属性来设置,另一种是通过 javascript 来设置。
一、 data 属性法:
data 属性法只需要为你想要监听的属性增加 data-spy="affix"
属性即可。然后通过 offset 属性设置上下边距。
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div>
二、javascript 方法:
通过 Javascript 调用 Affix
$(document).ready(function(){ $("#myNav").affix({ offset: { top: 125 } }); });
可能看了上面的讲解你依然不知道具体用法,下面提供了两个示例,相信通过这两个示例你一定会使用 Bootstrap 的 Affix 插件了。
小义 2014/07/22 09:25
你注册了wang域名
Specs 2014/07/22 09:30
@ 嗯~~
WAY 2014/11/21 15:16
有分层的affix效果吗
Specs 2014/11/21 15:35
@ 分层的是什么意思?
aoxuets 2016/08/22 09:33
@ 比如达到 Affix 打开 Collapse 插件的效果, Bootstrap官方侧栏的效果
Specs 2016/08/22 20:07
@ 参考文章中图片上面的 那个相关文章