首页 > 代码库 > Bootstrap中的Affix插件

Bootstrap中的Affix插件

我们为什么要用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插件