bootstrap怎么设置固定定位

189 阅读 0 评论 125 点赞

我是靠谱客的博主难过草莓，最近开发中收集的这篇文章主要介绍bootstrap怎么设置固定定位，觉得挺不错的，现在分享给大家，希望可以做个参考。

本教程操作环境：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 相反。

具体使用如下：

<div data-spy="affix" data-offset="90">affix元素</div>
登录后复制

分开设置 data-offset 值方式：

<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
登录后复制

注意，在 body 要声明滚动监控。

<body data-spy="scroll" data-target="sidebarMenu">
登录后复制

注意，请在宽屏模式下查看效果。据我测试下来，使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。

以上就是难过草莓为你收集整理的bootstrap怎么设置固定定位的全部内容，希望文章能够帮你解决bootstrap怎么设置固定定位所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。