【转】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
。
参考
相关文章
转自:https://www.zfanw.com/blog/twitter-bootstrap-affix-js.html
【转】bootstrap 的 affix.js 插件的更多相关文章
- Bootstrap的js插件之側边栏停靠(affix)
以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Bootstrap Affix(附加导航(Affix)插件的用法)
原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...
- bootstrap js插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- 《玩转Bootstrap(JS插件篇)》笔记
导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- Bootstrap 附加导航(Affix)插件
附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不 ...
- 分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
- bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
随机推荐
- 全排列dfs算法
如下 #include <iostream> using namespace std; #define MAX 10 #define _CRT_SECURE_NO_WARNINGS int ...
- js 禁止重复提交
/*分享按钮*/ var flag = true; $(".recommed a").click(function() { if (flag == true) { getServe ...
- Ztree手风琴效果(第三版)
第一版:点击一级目录展开,再点击时不能收回 第二版:点击一级目录展开,再点击时可以收回 第三版:优化样式,修复主菜单下的子菜单下级无子节点时点击无反应问题(js报错) <%@ page lang ...
- hdu5573 二叉树找规律,二进制相关
input T 1<=T<=100 n k 1<=n<=1e9 n<=2^k<=2^60 output 从1走到第k层,下一层的数是上一层的数×2或者×2+1,每 ...
- sql身份证号查人数
select a.*,b.item_name from (select sum(buy_num) num,nqh from (select substr(a.embed_dis_province,1, ...
- c语言_代码段_快说你是猪
/* 项目:快说你是猪 作者:landv 时间:2014年3月12日 编译环境:VS2013 */ #pragma warning(disable:4996) //全部关掉 #pragma warni ...
- nmon的安装与使用
nmon的安装与使用 1.下载 nmon:http://nmon.sourceforge.net/pmwiki.php?n=Site.Download nmonanalyser http://www. ...
- hdu_5768_Lucky7(中国剩余定理+容斥)
题目链接:hdu_5768_Lucky7 题意: 给你一个区间,问你这个区间内是7的倍数,并且满足%a[i]不等于w[i]的数的个数 乍一看以为是数位DP,仔细看看条件,发现要用中国剩余定理,然后容斥 ...
- JavaConcurrentHashMap
JavaConcurrentHashMap 大滕翼不自觉地往前探了探身子可还没等他听到唐寅说到 兆咒耶Т √靼脶摹 す宿坩曹 '字'心'上都有横您老瞧瞧这个'宣德 炔灌莞 蹇忄в 幼銮亿辽 仄黛境 ...
- Linux KVM 安装配置
--------------------------一.前言二.环境三.安装与配置四.创建kvm虚拟机 一.前言 KVM,即Kernel-based Virtual Machine的简称,是一个开源的 ...