全面解析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 位置插件
Dec 25 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
javascript基础知识讲解
Jan 11 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
用JS写一个发布订阅模式
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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JS中递归函数
2016/06/17 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
用Python逐行分析文件方法
2019/01/28 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python线程里哪种模块比较适合
2020/08/02 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
大学校庆策划书
2014/01/31 职场文书
2014年仓库工作总结
2014/11/20 职场文书
中学生自我评价范文
2015/03/03 职场文书
论文评审意见
2015/06/05 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书