我觉得 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

【转】bootstrap 的 affix.js 插件的更多相关文章

  1. Bootstrap的js插件之側边栏停靠(affix)

    以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. Bootstrap Affix(附加导航(Affix)插件的用法)

    原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...

  3. bootstrap js插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  4. 《玩转Bootstrap(JS插件篇)》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  5. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  6. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  7. Bootstrap 附加导航(Affix)插件

    附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不 ...

  8. 分页插件--根据Bootstrap Paginator改写的js插件

    刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...

  9. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

随机推荐

  1. 全排列dfs算法

    如下 #include <iostream> using namespace std; #define MAX 10 #define _CRT_SECURE_NO_WARNINGS int ...

  2. js 禁止重复提交

    /*分享按钮*/ var flag = true; $(".recommed a").click(function() { if (flag == true) { getServe ...

  3. Ztree手风琴效果(第三版)

    第一版:点击一级目录展开,再点击时不能收回 第二版:点击一级目录展开,再点击时可以收回 第三版:优化样式,修复主菜单下的子菜单下级无子节点时点击无反应问题(js报错) <%@ page lang ...

  4. hdu5573 二叉树找规律,二进制相关

    input T 1<=T<=100 n k 1<=n<=1e9  n<=2^k<=2^60 output 从1走到第k层,下一层的数是上一层的数×2或者×2+1,每 ...

  5. sql身份证号查人数

    select a.*,b.item_name from (select sum(buy_num) num,nqh from (select substr(a.embed_dis_province,1, ...

  6. c语言_代码段_快说你是猪

    /* 项目:快说你是猪 作者:landv 时间:2014年3月12日 编译环境:VS2013 */ #pragma warning(disable:4996) //全部关掉 #pragma warni ...

  7. nmon的安装与使用

    nmon的安装与使用 1.下载 nmon:http://nmon.sourceforge.net/pmwiki.php?n=Site.Download nmonanalyser http://www. ...

  8. hdu_5768_Lucky7(中国剩余定理+容斥)

    题目链接:hdu_5768_Lucky7 题意: 给你一个区间,问你这个区间内是7的倍数,并且满足%a[i]不等于w[i]的数的个数 乍一看以为是数位DP,仔细看看条件,发现要用中国剩余定理,然后容斥 ...

  9. JavaConcurrentHashMap

    JavaConcurrentHashMap 大滕翼不自觉地往前探了探身子可还没等他听到唐寅说到 兆咒耶Т √靼脶摹 す宿坩曹 '字'心'上都有横您老瞧瞧这个'宣德 炔灌莞 蹇忄в 幼銮亿辽 仄黛境 ...

  10. Linux KVM 安装配置

    --------------------------一.前言二.环境三.安装与配置四.创建kvm虚拟机 一.前言 KVM,即Kernel-based Virtual Machine的简称,是一个开源的 ...