全面解析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 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
Puppet的一些技巧
Sep 17 Javascript
JS实现随机抽取三人
Nov 06 Javascript
vue实现登录拦截
Jun 29 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中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
js实现随机点名程序
2020/09/17 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python简单实现基数排序算法
2015/05/16 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python web框架中实现原生分页
2019/09/08 Python
python如何调用java类
2020/07/05 Python
Python 如何在字符串中插入变量
2020/08/01 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
行政专员工作职责
2013/12/22 职场文书
法制宣传日活动总结
2014/04/29 职场文书
爱心倡议书范文
2014/05/12 职场文书
表扬通报怎么写
2015/01/16 职场文书
社会实践活动总结
2015/02/05 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
七年级生物教学反思
2016/02/20 职场文书