一、Transition(过滤)

作为2个基础支撑的零部件,被其余零件数十次引用。完结基于浏览器援助transition的能力,然后绑定动画的收尾事件;
率先:创设1个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:在页面底部的时候会增进的体制

肆 、处理公式:

一 、Top:traget的滚动条中度(scrollTop)<
成分设定离顶地点的距离(offsetTop)(第三回判断)
   
1.一 、scrollTop设置为:成分本身定位的top(元素当前稳住离文书档案原点的离开)(非第3回)
② 、getPinnedOffset:获取粘住成分top – target滚动条的top
叁 、bottom:借使粘住成分是第二回bottom定位的时候,那么bottom就是target滚动条中度 + target成分的惊人 >= 整个文书档案滚动条高度 –
粘住成分距离尾部的冲天
   3.1、固然是非第③次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样式,用于控制粘住条的定位。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图