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样式,用于控制粘住条的定位。
- codeforces 767A Snacktower(模拟)
- [快学Python3]Sets(集合)
- [nptl][rwlock]pthread rwlock原理分析
- [快学Python3]Dictionary(字典)
- [快学Python3]List(列表)
- [快学Python3]Tuple(元组)
- HDU 1248 寒冰王座(完全背包裸题)
- [快学Python3]String(字符串)
- [快学Python3]XML解析处理 - Element Tree
- Educational Codeforces Round 21(A.暴力,B.前缀和,C.贪心)
- [快学Python3]JSON解析
- Codeforces 754A Lesha and array splitting(简单贪心)
- [快学Python3]日期和时间处理
- Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3)(A.B.C,3道暴力题,C可二分求解)
- 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 实例
- 基于Canal与Flink实现数据实时增量同步(二)
- Spring第四天:SSH的整合、HibernateTemplate的使用、OpenSessionInViewFilter的使用
- IDEA 下单程序多端口不同配置独立运行
- 基于Canal与Flink实现数据实时增量同步(一)
- 8848钛金手机之nacos的注册发现
- 让你git 时不再输入账号和密码
- JS 实现点击按钮复制一段文字
- Python操作Excel合并单元格
- CRM第一天:客户关系管理系统的环境搭建和注册
- lambda 表达式导致 Arthas 无法 redefine 的问题
- 战士上战场,还不会部署kubernetes集群?
- 使用docker python 的最新版本以及pip 安装模块
- Java面试题总结之数据库与SQL语句
- Python脚本命令行执行隐藏密码等敏感信息
- 使用SRS Docker搭建自己的直播平台