Bootstrap中的Affix插件

时间：2021-11-26 05:53:19

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

相关文章