全面解析Bootstrap中transition、affix的使用方法


Posted in Javascript onMay 30, 2016

一、Transition(过滤)
作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件;
首先:创建一个Element;
然后:迭代查看此元素支持的transition动画名称
Transition实现的技巧,主要是重写了jquery的event对象,代码如下:

$(function () {
 $.support.transition = transitionEnd()

 if (!$.support.transition) return

 $.event.special.bsTransitionEnd = {
  bindType: $.support.transition.end,
  delegateType: $.support.transition.end,
  handle: function (e) {
  if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
  }
 }
 })

二、Affix(自动浮动定位)
1、Target:参数表示其定位参考节点(应该是产生滚动条的父容器对象),默认是window
2、Data-offset设置的top和bottom值,只会用于计算表达式,不会设置到css中
3、三种位置定位样式类:

3.1、Affix-top:到达页面顶部的时候会添加的样式
3.2、Affix:在页面中部的时候会添加的样式
3.3、Affix-bottom:在页面底部的时候会添加的样式

4、处理公式:

4.1、Top:traget的滚动条高度(scrollTop)< 元素设定离顶位置的距离(offsetTop)(首次判断)
    4.1.1、scrollTop设置为:元素本身定位的top(元素当前定位离文档原点的距离)(非首次)
4.2、getPinnedOffset:获取粘住元素top ? target滚动条的top
4.3、bottom:如果粘住元素是首次bottom定位的时候,那么bottom就是 target滚动条高度 + target元素的高度 >= 整个文档滚动条高度 ? 粘住元素距离底部的高度
   4.3.1、如果是非首次bottom定位
      1)、如果offsetTop(元素设定离顶位置的距离)不为空,target的top  + getpinnedOffset的值 > 粘住元素当前定位到top的值
      2)、如果offsetTop为空,target的top

+ target元素的高度 > 文档高度 ? 粘住元素距离底部的高度
4、能改变粘住元素的只有他的top,top值为:文档高度 — 粘住元素高度 — 粘住元素距离底部的高度

5、坑之所在:

1)、top和bottom一起使用的时候,会出现冲突,原因:

    Affix-bottom,也就是到达页面底部的时候,bootstrap是用offset来设置的top值,给元素加了position:relative值,这就导致在回到页面顶部后,再次向下滚动时候,没有任何效果
原因:行内样式设置的relative会覆盖class中设置的fixed样式

全面解析Bootstrap中transition、affix的使用方法

6、总结

1)、在top情况表现良好,在bottom情况下需要自己加入手动控制
2)、应用affix控件,至少要自己重写affix样式,用于控制粘住条的定位。

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
全面解析Bootstrap中form、navbar的使用方法
May 30 #Javascript
js实现页面a向页面b传参的方法
May 29 #Javascript
浅析jQuery中使用$所引发的问题
May 29 #Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 #Javascript
jQuery实现图像旋转动画效果
May 29 #Javascript
jQuery中使用animate自定义动画的方法
May 29 #Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 #Javascript
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python面试题小结附答案实例代码
2019/04/11 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
课程设计心得体会
2013/12/28 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
具结保证书
2015/01/17 职场文书
创卫工作总结2015
2015/04/22 职场文书