Bootstrap源码分析之transition、affix

一、Transition(过滤)

作为3个基础支撑的零件,被别的零件数十四遍引用。达成基于浏览器协理transition的力量,然后绑定动画的终结事件;
第③:成立3个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(自动生成定位)

壹 、Target:参数表示其固定参考节点(应该是产生滚动条的父容器对象),私下认可是window
② 、Data-offset设置的top和bottom值,只会用于计算表明式,不会设置到css中
叁 、二种职位固定样式类:

3.壹 、Affix-top:到达页面顶部的时候会添加的样式
3.贰 、Affix:在页面中部的时候会添加的样式
3.③ 、Affix-bottom:在页面底部的时候会加上的样式

肆 、处理公式:

1、Top:traget的滚动条高度(scrollTop)<
成分设定离顶地方的相距(offsetTop)(第贰回判断)
2018正版葡京赌侠诗,   
1.① 、scrollTop设置为:成分本人定位的top(成分当前平素离文书档案原点的离开)(非第2次)
二 、getPinnedOffset:获取粘住成分top – target滚动条的top
叁 、bottom:假如粘住成分是第3遍bottom定位的时候,那么bottom就是target滚动条高度 + target成分的莫大 >= 整个文书档案滚动条中度 –
粘住成分距离尾部的可观
   3.壹 、假设是非第①遍bottom定位
     
3.1.① 、纵然offsetTop(成分设定离顶地点的距离)不为空,target的top
 + getpinnedOffset的值 > 粘住成分当前固定到top的值
      3.1.二 、如若offsetTop为空,target的top   + target成分的万丈
> 文书档案高度 – 粘住成分距离尾部的莫大
④ 、能更改粘住成分的只有他的top,top值为:文书档案中度 — 粘住成分高度 —
粘住成分距离底部的莫大

⑤ 、坑之所在:

一 、top和bottom一起利用的时候,会现出冲突,原因:

   
Affix-bottom,相当于到达页面底部的时候,bootstrap是用offset来设置的top值,给成分加了position:relative值,那就造成在重返页面顶部后,再一次向下滚动时候,没有其余作用
style=”color: #ff0000;”>原因:行内样式设置的relative会覆盖class中设置的fixed样式
2018正版葡京赌侠诗 1

6、总结

① 、在top情状展现卓绝,在bottom意况下必要团结参与手动控制
贰 、应用affix控件,至少要团结重写affix样式,用于控制粘住条的原则性。

相关文章