【转】bootstrap 的 affix.js 插件

本文详细介绍了Twitter Bootstrap Affix插件的原理与使用方法,包括如何通过JavaScript设置offset参数来控制元素的固定与浮动状态,并提供了实际案例演示。文章还讨论了在使用过程中可能遇到的问题及解决办法。

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

这一篇也一样。

Affix 效果

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

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

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

affix、affix-top、affix-bottom 类

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

  1. affix-top
  2. affix
  3. affix-bottom

插件提供的配置参数 offset: { },里面包括两个值:top 和 bottom。

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

  1. 页面加载完毕后,应用 affix 效果的内容会增加一个 .affix-top 样式类
  2. 当页面向下滚动了 top 的距离时,.affix-top 切换成 .affix 类
  3. 页面滚动到离底部距离为 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

参考

  1. bootstrap-affix.js issue

相关文章

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

转载于:https://www.cnblogs.com/dhsx/p/4819502.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值