全面解析Bootstrap中transition、affix的使用方法

全面解析Bootstrap中transition、affix的使用方法

一、Transition（过滤）

作为一个基础支持的组件，被其他组件多次引用。实现根据浏览器支持transition的能力，然后绑定动画的结束事件；

首先：创建一个Element；

然后：迭代查看此元素支持的transition动画名称

Transition实现的技巧，主要是重写了jquery的event对象，代码如下：

$(function () {

$.support.transition = transitionEnd()

if (!$.support.transition) return

$.event.special.bsTransitionEnd = {

bhttp://indType: $.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、处理公式：

4.1、Top：traget的滚动条高度（scrollTop）< 元素设定离顶位置的距离（offsetTop）（首次判断）

    4.1.1、scrollTop设置为：元素本身定位的top（元素当前定位离文档原点的距离）（非首次）

4.2、getPinnedOffset：获取粘住元素top – target滚动条的top

4.3、bottom：如果粘住元素是首次bottom定位的时候，那么bottom就是 target滚动条高度 + target元素的高度 >= 整个文档滚动条高度 – 粘住元素距离底部的高度

   4.3.1、如果是非首次bottom定位

      1)、如果offsetTop（元素设定离顶位置的距离）不为空，target的top 　＋　getpinnedOffset的值 > 粘住元素当前定位到top的值

      2)、如果offsetTop为空，target的top 　　＋ target元素的高度 > 文档高度 – 粘住元素距离底部的高度

4、能改变粘住元素的只有他的top，top值为：文档高度 — 粘住元素高度 — 粘住元素距离底部的高度

5、坑之所在：

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

Affix-bottom，也就是到达页面底部的时候，bootstrap是用offset来设置的top值，给元素加了position:relative值，这就导致在回到页面顶部后，再次向下滚动时候，没有任何效果

原因：行内样式设置的relative会覆盖class中设置的fixed样式

6、总结

1)、在top情况表现良好，在bottom情况下需要自己加入手动控制

2)、应用affix控件，至少要自己重写affix样式，用于控制粘住条的定位。

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。