【转】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& ...
随机推荐
- juniper防护墙接口的NAT和ROUTE模式如何选择问题
juniper防护墙一般是把trust接口部署为NAT模式,untrust接口部署为route模式.这样当来自内部的数据访问Utrust区域时,会把源地址翻译成untrust接口的地址.从而达到隐藏内 ...
- spring配置文件详解【总结】
知其然,知其所以然 <?xml version="1.0" encoding="UTF-8"?> <beans:beans xmlns=&qu ...
- Quartz(任务调度)- 入门学习
参照:http://blog.csdn.net/szwangdf/article/details/6158646 1.自定义定时任务管理类 QuartzManager 参照大神基础上新增:1.添加jo ...
- C++中的向上类型转换和向下类型转换
在c++的世界中有这样两个概念,向上类型转换,向下类型转换,分别描述的是子类向基类,和基类向子类的强制类型转换. 向上强制类型转换 切割:覆盖方法和子类数据丢失的现象生成切割(slice) class ...
- Echart图表相关配置项的设置
饼状图提示框单位显示 在{c}后面即可添加任意单位内容. 一条记录含有多组数据的柱状图单位显示 标注单位的显示. 目前还未找到方法实现,当鼠标移动到标注上时设置显示单位. 标线单位的显示
- svn地址如何更改
1.先进入平时放的更新文件的位置 2.然后右键 选中TortoiseSVN中的Relocate修改里面的完了之后输入账号和密码就好了当然你要记得密码和账号
- MFC中获取系统当前时间
1.使用CTime类 CString str; //获取系统时间 CTime tm; tm=CTime::GetCurrentTime(); str=tm.Format("现在时间是%Y年% ...
- Chapter 2 Open Book——7
I gunned my deafening engine to life, ignoring the heads that turned inmy direction, and backed care ...
- java IO类图
- hdu_4824_Disk Schedule(dp)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4824 题意:中文,不解释 题解:双调欧几里德旅行商问题,具体可看dp双调欧几里德旅行商,这里注意的是起 ...