BootstrapBootstrap源码分析之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值,这就导致在再次来到页面顶部后,再度向下滚动时候,没有任何功效
style=”color: #ff0000;”>原因:行内样式设置的relative会覆盖class中设置的fixed样式
Bootstrap 1

6、总结

1、在top意况表现可以,在bottom情状下需要自己参预手动控制
2、应用affix控件,至少要自己重写affix样式,用于控制粘住条的一贯。

相关文章