最新的Web开发教程
 

Bootstrap JS词缀

❮上一页 下一页参考❯

JS词缀(affix.js)

词缀插件允许元素成为贴（锁定）到页面上的一个区域。 这通常是与导航菜单或社会图标按钮使用的，以使它们“粘”在一特定区域，而上下滚动的网页。

该插件打开和关闭这种行为（从静态到固定的改变CSS位置的值），这取决于滚动位置。

这一词缀三个类之间切换插件： .affix ， .affix-top和.affix-bottom 。 每一类代表一个特定的状态。 您必须添加CSS属性来处理的实际位置，与例外position:fixed的.affix类。

欲了解更多信息，请阅读我们的Bootstrap词缀教程 。

提示：词缀插件经常与一起使用Scrollspy插件。

通过data-*属性

添加data-spy="affix"到你想窥探元素和data-offset-top|bottom=" number "属性来计算滚动的位置。

例

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
试一试»

通过JavaScript

与手动启用：

例

$('.nav').affix({offset: {top: 150} });
试一试»

贴上选项

选项可以通过数据属性或JavaScript进行传递。 对于数据属性，选项名称追加到数据 - ，如在数据偏移=“”。

名称 类型 默认 描述
offsetnumber | object | function10 指定计算滚动的位置时，从屏幕偏移的像素的数量。 当使用单个号码，该偏移被加到顶部和底部的方向。 如果你只是想控制的顶部或底部，使用对象，像offset: {top:25}

对于多个偏移，使用offset: {top:25, bottom:50}

提示：使用函数来提供动态偏移（可以是响应设计非常有用）
targetselector | node | elementthe window object 指定词缀的目标元素

词缀活动

下表列出了所有可用的词缀事件。

事件 描述 尝试一下
affix.bs.affix 前固定定位被添加到元件发生时（例如，当.affix-top类是关于与被替换.affix类） 尝试一下
affixed.bs.affix 后固定定位被添加到元件发生时（例如，后.affix-top类被替换为.affix类） 尝试一下
affix-top.bs.affix 发生顶部元件返回到它的原始（非固定的）位置之前（例如， .affix类即将被替换.affix-top ） 尝试一下
affixed-top.bs.affix 发生顶部元件返回到它的原始（非固定的）位置之后（例如， .affix类已被替换.affix-top ） 尝试一下
affix-bottom.bs.affix 底部元件返回到它的原始（非固定的）位置之前发生（例如， .affix类即将被替换.affix-bottom ） 尝试一下
affixed-bottom.bs.affix 底部元件返回到它的原始（非固定的）位置（例如，后发生.affix类已被替换.affix-bottom ） 尝试一下
例子

例子

导航栏贴

创建水平贴导航菜单：

例

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
试一试»

使用jQuery自动贴上导航栏

使用jQuery的outerHeight()方法来贴上导航栏用户滚动后，通过指定的元素(<header>)

例

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
试一试»

Scrollspy和词缀

使用与缀在一起插件Scrollspy插件：

水平菜单（导航栏）

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
试一试»

垂直菜单（Sidenav）

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
试一试»

词缀上导航栏动画

使用CSS来操作不同.affix类：

示例 - 更改背景颜色以及滚动导航栏的填充

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color: #F44336;
    border-color: #F44336;
}

.affix a {
    color: #fff !important;
    padding: 15px !important;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top a {
    padding: 25px !important;
}
试一试»

示例 - 在滑动导航栏

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top {
    position: static;
    top: -35px;
}
试一试»

❮上一页 下一页参考❯