• 技术文章 >web前端 >前端问答

    bootstrap怎么设置固定定位

    长期闲置长期闲置2022-05-06 15:26:55原创243

    在bootstrap中,可以利用Affix插件设置固定定位,该插件可以通过自定义属性data对任何元素进行固定定位,语法为“<element data-spy="affix" data-offset="元素距离顶部与底部的距离">”。

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

    bootstrap怎么设置固定定位

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

    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怎么设置固定定位的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:aria在bootstrap里是啥意思 下一篇:es6的let是什么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• bootstrap和less是什么关系• bootstrap最多可以分多少列• bootstrap中介效应要看p值吗• bootstrap栅格化的原理是啥• 手把手带你使用Bootstrap实现瀑布流布局
    1/1

    PHP中文网