Bootstrap中的Affix插件

标签：otto   top   function   tom   ott   实用   target   ret   size   

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

标签：otto   top   function   tom   ott   实用   target   ret   size   

原文地址：http://www.cnblogs.com/bfc0517/p/6964699.html