Bootstrap源码分析之transition、affix
一、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、处理公式:
1、Top:traget的滚动条高度(scrollTop)< 元素设定离顶位置的距离(offsetTop)(首次判断) 1.1、scrollTop设置为:元素本身定位的top(元素当前定位离文档原点的距离)(非首次) 2、getPinnedOffset:获取粘住元素top – target滚动条的top 3、bottom:如果粘住元素是首次bottom定位的时候,那么bottom就是 target滚动条高度 + target元素的高度 >= 整个文档滚动条高度 – 粘住元素距离底部的高度 3.1、如果是非首次bottom定位 3.1.1、如果offsetTop(元素设定离顶位置的距离)不为空,target的top + getpinnedOffset的值 > 粘住元素当前定位到top的值 3.1.2、如果offsetTop为空,target的top + target元素的高度 > 文档高度 – 粘住元素距离底部的高度 4、能改变粘住元素的只有他的top,top值为:文档高度 — 粘住元素高度 — 粘住元素距离底部的高度
5、坑之所在:
1、top和bottom一起使用的时候,会出现冲突,原因: Affix-bottom,也就是到达页面底部的时候,bootstrap是用offset来设置的top值,给元素加了position:relative值,这就导致在回到页面顶部后,再次向下滚动时候,没有任何效果 原因:行内样式设置的relative会覆盖class中设置的fixed样式
6、总结
1、在top情况表现良好,在bottom情况下需要自己加入手动控制 2、应用affix控件,至少要自己重写affix样式,用于控制粘住条的定位。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例