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传递。下表列出了这些选项：

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

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

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

Affix插件

通过CSS定位