Bootstrap源码分析之transition、affix

$(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)
}
}
})

3.1、Affix-top：到达页面顶部的时候会添加的样式
3.2、Affix：在页面中部的时候会添加的样式
3.3、Affix-bottom：在页面底部的时候会添加的样式

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值为：文档高度 — 粘住元素高度 — 粘住元素距离底部的高度

1、top和bottom一起使用的时候，会出现冲突，原因：

Affix-bottom，也就是到达页面底部的时候，bootstrap是用offset来设置的top值，给元素加了position:relative值，这就导致在回到页面顶部后，再次向下滚动时候，没有任何效果
原因：行内样式设置的relative会覆盖class中设置的fixed样式

1、在top情况表现良好，在bottom情况下需要自己加入手动控制
2、应用affix控件，至少要自己重写affix样式，用于控制粘住条的定位。