Bootstrap中的Affix插件
2017-06-08 20:38
218 查看
我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多。
今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法。
Affix用法:
- 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> code... </div>
- data-spy : 该属性可以让导航栏固定,不过用了这个属性可能会使你的页面结构发生改变,比如CSS的层级或样式问题。
- data-offset-top : 该属性用来设置距离页面顶部偏移多少,然后再使导航定位。
- data-offset-bottom : 该属性用来设置距离页面底部偏移多少,然后再使导航定位。
还有另一种方法:
- 通过 JavaScript:您可以通过 JavaScript 手动为某个元素添加附加导航(Affix),如下所示:
$('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.footer').outerHeight(true)) } } })
- 获取到标签,调用affix方法,用offset对象设置属性和属性值。
这个插件不管是横竖的导航条都很实用,用法套路也是差不多的,还是看项目用哪种方法合适吧。
最后附上bootstrap中文网的affix链接,不过没有中文翻译:http://v3.bootcss.com/javascript/#affix
相关文章推荐
- 【转】bootstrap 的 affix.js 插件
- Bootstrap 附加导航(Affix)插件
- bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
- Bootstrap JS插件使用实例(10)-附加导航(affix)
- Bootstrap 附加导航(Affix)插件实例详解
- Bootstrap插件Affix问题解决
- Bootstrap 插件Affix
- Bootstrap的js插件之侧边栏停靠(affix)
- Bootstrap 附加导航(Affix)插件
- Bootstrap 附加导航(Affix)插件
- Bootstrap每天必学之附加导航(Affix)插件
- Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
- Bootstrap插件(六)——警告框(alert.js)
- BootStrap之datetimepicker插件使用
- Bootstrap每天必学之js插件
- 【Tomcat】eclipse运行Bootstrap启动tomcat,免插件配置
- bootstrap3-typeahead自动补全插件
- sublime text3下的bootstrap插件
- jQuery Modal bootstrap风格对话框插件