【转】bootstrap 的 affix.js 插件

我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高，但文档多数简单。按部就班操作了，有效果当然好，没效果的话简直不知道为什么。之前我写过 Scrollspy 用法，就是我在博客上折腾该插件的一点总结。

这一篇也一样。

Affix 效果

从字面上翻译，则 affix 是固定的意义，但这个插件里，这固定是有条件的。

先来看下 affix 的效果，本篇右侧的目录导航。

这一目录部分，在页面刚滚动时，是随页面一起滚动的，但到达某一位置后，它开始固定在页面上；页面滚动到评论部分时，目录不再固定，又随页面一起滚动。

affix、affix-top、affix-bottom 类

页面滚动过程中，Affix 插件会根据我们的配置参数切换应用到目录部分的 CSS 类，整个滚动过程会产生三个类：

affix-top

affix

affix-bottom

插件提供的配置参数

offset: { }

，里面包括两个值：top 和 bottom。

整个过程用文字描述如下：

页面加载完毕后，应用 affix 效果的内容会增加一个

.affix-top

样式类

当页面向下滚动了 top 的距离时，

.affix-top

切换成

.affix

类

页面滚动到离底部距离为 bottom 时，

.affix

类切换成

.affix-bottom

这样，我们根据需要定义这三个类的样式就好了。

案例

仍是本篇，

目录部分，我添加了一个 ID

myaffix

，在引用 jQuery 与 Bootstrap.js 后，添加 JavaScript 代码如下：

$('#myaffix').affix({
offset: {
top: 50
, bottom: function () {
return (this.bottom = $('#comments').outerHeight(true) + $('#footer').outerHeight(true))
}
}
});

这里我通过 JavaScript 设置 offset 值，而不是直接在 HTML 标签中应用属性

data-spy="affix"

、

data-offset-top

与

data-offset-bottom

，这是因为评论部分的高度无法确定，bottom 值只能动态计算。

这样，页面加载完成后，#myaffix 有一个

.affix-top

类，在滚动 50px 后，#myaffix 部分有一个

.affix

类，在离页面底部距离 bottom 值时，#myaffix 部分的类又变成

.affix-bottom

。

CSS 里，我只定义了两个类：

.affix{position:fixed;top:30px;}
.affix-bottom{position:absolute;}

插件会自动计算

.affix-bottom

类的 top 值，所以无需我们设置。

注意事项

如果发现固定部分在滚动时有抖动现象，需要给 body 设置

position:relative

。

参考

bootstrap-affix.js issue

相关文章

jspm 安装使用 Bootstrap 与 jQuery

Bootstrap ScrollSpy 用法

转自：https://www.zfanw.com/blog/twitter-bootstrap-affix-js.html