bootstrap如何设置固定定位

这篇文章主要介绍了bootstrap如何设置固定定位的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇bootstrap如何设置固定定位文章都会有所收获，下面我们一起来看看吧。

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了景洪免费建站欢迎大家使用！

在bootstrap中，可以利用Affix插件设置固定定位，该插件可以通过自定义属性data对任何元素进行固定定位，语法为“”。

本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑

固定定位--声明式触发固定定位

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如何设置固定定位”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“bootstrap如何设置固定定位”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

本文标题：bootstrap如何设置固定定位
文章URL：http://cxhlcq.com/article/jdshei.html