来自:慕课网http://www.imooc.com/code/5396
Affix 效果常见的有以下三种:
☑ 顶部固定
☑ 侧边栏固定
☑ 底部固定
固定定位--声明式触发固定定位
Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发。其主要包括两个参数:
1、data-spy:取值 affix,表示元素固定不变的。
2、data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom。
- data-offset-top 用来设置元素距离顶部的距离。比如 90,表示元素距离顶部 90px,当用户从顶部向下拖动滚动条,当滚动的距离大于 90px 时,affix 元素不再滚动,就会固定在浏览器窗口顶部。
- data-offset-bottom 刚好与 data-offset-top 相反。
具体使用如下:
affix元素
分开设置 data-offset 值方式:
affix元素
注意,在 body 要声明滚动监控。
注意,请在宽屏模式下查看效果。据我测试下来,使用声明式,就算设置了 data-offset-top 的值也会失效,需要在样式中给 affix 设置一个top值,与 data-offset-top 值相等。data-offset-bottom一样。
Bootstrap 附加导航(Affix)插件 第一部分
a
a
a
a
a
第二部分
a
a
a
a
a
a
第三部分
a
a
a
a
a
第四部分
a
a
a
a
a
第五部分
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a