Bootstrap Affix 和过渡效果插件的详细使用【前端 Bootstrap 框架】

作者：黎燃

2022 年 7 月 28 日
本文字数：1851 字
阅读完需：约 6 分钟

Bootstrap Affix和过渡效果插件的详细使用【前端Bootstrap框架】

Affix 插件

附件插件允许指定<div>固定在页面上的某个位置。一个常见的例子是社交图标。它们将从某个位置开始，但当页面单击标记时，<div>将锁定在某个位置，并且不会与页面的其余部分一起滚动。如果要单独引用此插件的功能，则需要引用 affix js 或者，如“bootstrap 插件概述”，可以 bootstrap JS 或 bootstrap.min.JS 的压缩版本。通过数据属性：如果需要向元素添加额外的导航（粘贴）行为，则只需向需要监视的元素添加数据。使用偏移来定义何时切换图元的锁定和移动。

<style>    ul.nav-tabs{        width: 140px;        margin-top: 20px;        border-radius: 4px;        border: 1px solid #ddd;        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);    }    ul.nav-tabs li{        margin: 0;        border-top: 1px solid #ddd;    }    ul.nav-tabs li:first-child{        border-top: none;    }    ul.nav-tabs li a{        margin: 0;        padding: 8px 16px;        border-radius: 0;    }    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{        color: #fff;        background: #0088cc;        border: 1px solid #0088cc;    }    ul.nav-tabs li:first-child a{        border-radius: 4px 4px 0 0;    }    ul.nav-tabs li:last-child a{        border-radius: 0 0 4px 4px;    }    ul.nav-tabs.affix{        top: 30px; /* Set the top position of pinned element */    }</style><script>$(document).ready(function(){    $("#myNav").affix({        offset: {             top: 125       }    });});</script></head><body data-spy="scroll" data-target="#myScrollspy"><div class="container">   <div class="jumbotron">        <h1>Bootstrap Affix</h1>    </div>    <div class="row">        <div class="col-xs-3" id="myScrollspy">            <ul class="nav nav-tabs nav-stacked" id="myNav">                <li class="active"><a href="#section-1">第一部分</a></li>                <li><a href="#section-2">第二部分</a></li>                <li><a href="#section-3">第三部分</a></li>                <li><a href="#section-4">第四部分</a></li>                <li><a href="#section-5">第五部分</a></li>            </ul>        </div>

复制代码

通过数据属性使用附加导航（粘贴）插件：

$('#myAffix').affix({   offset: {      top: 100, bottom: function () {         return (this.bottom =             $('.bs-footer').outerHeight(true))         }      }})

复制代码

Affix 插件运行结果如下：

通过 CSS 定位

在上述两种使用附件插件的方法中，必须通过 CSS 定位内容。词缀插件在三个类之间切换，每个类都呈现一个特定的状态：粘贴固定顶部和。固定底部。按照以下步骤为这三种状态设置自己的 CSS（独立于此插件）。在开始时，插件添加了。固定顶部以指示图元位于其最顶部位置。此时不需要 CSS 定位。在添加了附加导航（词缀）的元素中滚动时，应触发实际的附加导航（词缀）。此时，修复程序将替换。固定顶部和设置位置：固定；（由 bootstrap 的 CSS 代码提供）。如果定义了底部偏移，当滚动到达此位置时，更换用.Fix-bottom 固定。由于偏移量是可选的，如果设置了偏移量，则需要同时设置适当的 CSS。在这种情况下，添加位置：绝对；必要时；

一些选项通过数据属性或 JavaScript 传递。下表列出了这些选项：

<table class="reference notranslate"><tbody><tr><th>选项名称</th><th>类型/默认值</th><th>Data 属性名称</th><th>描述</th></tr><tr><td>offset</td><td>number | function | object<br> <i>默认值：10</i></td><td>data-offset</td><td>当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。</td></tr></tbody></table>

过渡效果插件

过渡插件提供了简单的过渡效果。其他插件使用它来检查 CSS 转换效果支持并获得转换效果过渡插件的用例：1.具有滑动或淡入效果的模式对话框。2.带淡出效果的标签。有关具体示例，请参阅引导选项卡插件。3.具有淡出效果的警告框。有关具体示例，请参阅引导警报插件。4.具有滑动效果的旋转木马。有关具体示例，请参阅引导 carousel 插件。

发布于: 3 小时前阅读数: 8

原文链接:【http://xie.infoq.cn/article/b34978161be74899523c289c2】。文章转载请联系作者。