博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap 固定定位(Affix)
阅读量:6333 次
发布时间:2019-06-22

本文共 2866 字,大约阅读时间需要 9 分钟。

来自:慕课网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

View Code

 

转载于:https://www.cnblogs.com/XDJjy/p/4693743.html

你可能感兴趣的文章
Guava Files
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
苹果手机开源×××-StrongSwan【新任帮主】
查看>>
hadoop2.6 编译
查看>>
Set up KVM/QEMU/SPICE on Ubuntu 11.04
查看>>
2012-07-18
查看>>
wildfly 多实例启动
查看>>
性能测试工具
查看>>
Retrofit
查看>>
求Sn=a+aa+aaa+aaaa+aaaaa的前5项之和,其中a是一个数字,例如:2+22+222+2222+22222
查看>>
Reactor模式
查看>>
Sofire v1.0 开源——WinForm/SL/WebForm 的 Remoting(1)
查看>>
我的友情链接
查看>>
使用包ldap3进行Python的LDAP操作3
查看>>
【xinfanqie】9大方法迅速解决电脑黑屏问题
查看>>
CentOS6.4的ext4文件系统如何实现挂载大于16TB的磁盘分区
查看>>
the word of jews
查看>>
linux必知必会
查看>>
迭代输出
查看>>