全面解析Bootstrap中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、处理公式：

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一起使用的时候，会出现冲突，原因：

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

6、总结

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

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

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

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

赞 (0)

相关推荐

  • Bootstrap实现带动画过渡的弹出框

    Bootstrap实现带动画过渡的弹出框

    先看看效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>带动画过的渡弹出框</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quo

  • Bootstrap 过渡效果Transition 模态框（Modal）

    Bootstrap 过渡效果Transition 模态框（Modal）

    可以切换模态框(Modal)插件的隐藏内容: 1.通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框(带有 id="identifier") 2.通过 JavaScript:使

  • Bootstrap模态框（Modal）实现过渡效果

    Bootstrap模态框（Modal）实现过渡效果

    可以切换模态框(Modal)插件的隐藏内容: 1.通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框(带有 id="identifier") 2.通过 JavaScript:使

  • 整理关于Bootstrap过渡动画的慕课笔记

    整理自慕课笔记 动画过渡(Transitions): 源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法: * 调用统一编译的bootstrap.js: * 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址). transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果.不过需要注意的是,这

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

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

    一.Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用.实现根据浏览器支持transition的能力,然后绑定动画的结束事件: 首先:创建一个Element: 然后:迭代查看此元素支持的transition动画名称 Transition实现的技巧,主要是重写了jquery的event对象,代码如下: $(function () { $.support.transition = transitionEnd() if (!$.support.transition) return

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • 深入解析Java中反射中的invoke()方法

    深入解析Java中反射中的invoke()方法

    先讲一下java中的反射: 反射就是将类别的各个组成部分进行剖析,可以得到每个组成部分,就可以对每一部分进行操作 反射机制应用场景:逆向代码.动态生成类框架等,使用反射机制能够大大的增强程序的扩展性. 反射的基本步骤:首先获得Class对象,然后实例化对象,获得类的属性.方法或者构造函数,最后访问属性.调用方法.调用构造函数创建对象.而invoke()方法就是用来执行指定对象的方法. 在比较复杂的程序或框架中来使用反射技术,可以简化代码提高程序的复用性. 讲的是Method类的invoke()方

  • 全面解析Bootstrap中Carousel轮播的使用方法

    全面解析Bootstrap中Carousel轮播的使用方法

    本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下 源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析:  1.Html结构:主要分为以四个部分   1.1.容器:最外层div,需要一个data-ride="carousel"来指定为轮播放插件,并且提供一个Id,方便圆圈指示符的关联   1.2.图片列表部分,用一个外层div包裹所有,

  • 全面解析JavaScript中的valueOf与toString方法(推荐)

    可以这样说,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题.在程序应用非常广泛.下面我们逐一来给大家介绍下. JavaScript 的 valueOf() 方法 valueOf() 方法可返回 Boolean 对象的原始值. 用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值.如果调用该方法的对象不是 Boolean,则抛出异常 TypeError. <script

  • 全面解析Bootstrap中scrollspy（滚动监听）的使用方法

    bootstrap源码分析之scrollspy(滚动侦听) 源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致 <div id="selector" class="n

  • 全面解析Bootstrap中tab（选项卡）的使用方法

    本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件   1.1.Hiden.bs.tab:隐藏上一个元素   1.2.Show.bs.tab:显示当前元素   1.3.Hidee

  • 全面解析Bootstrap中form、navbar的使用方法

    全面解析Bootstrap中form、navbar的使用方法

    一.表单(Form) 源码文件: _form.scss mixins/_form.scss 1.按层次结构分:form-group -> form-control/input-group/form-static-control -> 各类标签 2.Form-group/form-control/input-group/form-static-control之类的容器,分为两种显示方式:block.inline-block.而实现input-group水平用的是table-cell. .inpu

  • 全面解析Bootstrap中nav、collapse的使用方法

    一.导航分析(nav) 源码文件: _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertical-align.scss:垂直对齐 1.只是用css进行了样式修饰,对Js没有任何依赖 2.导航模块可以包含下拉模块 3.实现了水平.垂直.水平平均分配(table-cell实现,4.0移除).tabs.胶囊等样式 4.Nav-divider:有一个像素的高度实现分隔线 5.Nav-stacked:垂直对齐实现 6.提供了tab-co

  • 全面解析Bootstrap中tooltip、popover的使用方法

    全面解析Bootstrap中tooltip、popover的使用方法

    一.tooltip(提示框)  源码文件:  Tooltip.js Tooltip.scss 实现原理:  1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.width.height等) 2.计算tooltip的位置,是top.left.bottom.right其中一个 3.然后根据计算的位置值,运算出坐标值 4.给tooltip应用坐标值  源码分析:  1.ownerDocument:文档:包含两个对象:<DocType>.documentEle

随机推荐