全面解析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 相关文章推荐
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
全面解析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脚本的10个技巧(7)
2006/10/09 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python多继承顺序实例分析
2018/05/26 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
详解python 爬取12306验证码
2019/05/10 Python
Python代码太长换行的实现
2019/07/05 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python实现简单遗传算法
2020/09/18 Python
python 制作本地应用搜索工具
2021/02/27 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
人事部专员岗位职责
2014/03/04 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
女性健康知识讲座通知
2015/04/23 职场文书