深入浅析Bootstrap中的自动定位浮标-Bootstrap教程-PHP中文网

基本用法" >基本用法

JS触发" >JS触发

首页

web前端

Bootstrap教程

深入浅析Bootstrap中的自动定位浮标

青灯夜游

Apr 25, 2021 pm 07:08 PM

bootstrap

本篇文章带大家详细了解一下Bootstrap中的自动定位浮标。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

深入浅析Bootstrap中的自动定位浮标

Affix 插件主要功能就是通过插件给某个元素（需要固定的元素）添加或删除position:fixed，实现元素在浏览器窗口的粘性固定效果。【相关推荐：《bootstrap教程》】

基本用法

首先，来看一个苹果官网对自动定位浮标的应用

从上面的git图中可知，Macbook一栏滚动到一定高度时，固定在窗口顶部便不再移动

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>
<!-- 等价 -->
<div data-spy="affix" data-offset-top="90" data-offset-bottom="90">affix元素</div>

登录后复制

【设置CSS】

在使用Affix插件时，必须通过 CSS 定位内容。Affix插件在三种 class 之间切换，每种 class 都呈现了特定的状态：.affix、.affix-top 和 .affix-bottom

1、在开始时，插件添加.affix-top来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位　

2、当滚动经过添加了Affix的元素时，应触发实际的Affix。此时.affix会替代.affix-top，同时设置position: fixed（由 Bootstrap 的 CSS 代码提供）

这时，需要手动设置.affix，如.affix{top:0;}表示停止在窗口顶部

3、如果定义了底部偏移，当滚动到达该位置时，应把.affix替换为.affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加position: absolute;

<style>
.test{width: 100%;height: 50px;background-color:lightgreen;}
.affix{top:0px;}
</style>
</head>
<body style="height:1000px;" >
<div style="height:100px"></div>
<div data-spy="affix" data-offset="100" class="test"></div>
</body>

登录后复制

JS触发

有时候，使用该插件，其顶部和底部的高度不一定是固定的，所以在初始化时使用声明式用法不太合适。这时，使用javascript用法就显得比较灵活了，因为它不仅支持传入数字型的offset，还支持传入能够动态计算offset的function函数

<script>
$(&#39;#myAffix&#39;).affix({
  offset: {
    top:100,
    bottom: function () {
      return (this.bottom = $(&#39;footer&#39;).outerHeight(true))
    }
  }
})    
</script>

登录后复制

【事件】

affix组件提供了6种事件，即affix和affixed各对应于3种状态(普通、top、bottom)时的事件

affix.bs.affix    在定位结束之前立即触发
affixed.bs.affix    在定位结束之后立即触发
affix-top.bs.affix    在定位元素应用affixed-top效果之前立即触发
affixed-top.bs.affix    在定位元素应用affixed-top效果之后立即触发
affix-bottom.bs.affix    在定位元素应用affixed-bottom效果之前立即触发
affixed-bottom.bs.affix    在定位元素应用affixed-bottom效果之后立即触发

登录后复制

<style>
.test{width: 100%;height: 50px;background-color:lightgreen;}
header{height: 100px;}
.affix{top:0px;}
</style>
</head>
<body style="height:1000px;">
<header></header>
<div data-spy="affix" class="test"></div>
<script>
$(function(){
    $(&#39;.test&#39;).affix({
        offset:{
            top:function(){
                return (this.top = $(&#39;header&#39;).outerHeight(true))
            }
        }
    }).on(&#39;affix.bs.affix&#39;,function(){
        $(this).html(&#39;我被固定在窗口顶部&#39;);
    }).on(&#39;affix-top.bs.affix&#39;,function(){
        $(this).html(&#39;我正跟随滚动条滚动&#39;);
    })
})    
</script>

登录后复制

更多编程相关知识，请访问：编程视频！！

以上是深入浅析Bootstrap中的自动定位浮标的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7748

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

bootstrap搜索栏怎么获取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。

bootstrap垂直居中怎么弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。