一、Transition（過(guò)濾）
作為一個(gè)基礎(chǔ)支持的組件，被其他組件多次引用。實(shí)現(xiàn)根據(jù)瀏覽器支持transition的能力，然后綁定動(dòng)畫(huà)的結(jié)束事件；
首先：創(chuàng)建一個(gè)Element；
然后：迭代查看此元素支持的transition動(dòng)畫(huà)名稱(chēng)
Transition實(shí)現(xiàn)的技巧，主要是重寫(xiě)了jquery的event對(duì)象，代碼如下：

$(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（自動(dòng)浮動(dòng)定位）
1、Target：參數(shù)表示其定位參考節(jié)點(diǎn)（應(yīng)該是產(chǎn)生滾動(dòng)條的父容器對(duì)象），默認(rèn)是window
2、Data-offset設(shè)置的top和bottom值，只會(huì)用于計(jì)算表達(dá)式，不會(huì)設(shè)置到css中
3、三種位置定位樣式類(lèi)：

3.1、Affix-top：到達(dá)頁(yè)面頂部的時(shí)候會(huì)添加的樣式
3.2、Affix：在頁(yè)面中部的時(shí)候會(huì)添加的樣式
3.3、Affix-bottom：在頁(yè)面底部的時(shí)候會(huì)添加的樣式

4、處理公式：

4.1、Top：traget的滾動(dòng)條高度（scrollTop）< 元素設(shè)定離頂位置的距離（offsetTop）（首次判斷）
    4.1.1、scrollTop設(shè)置為：元素本身定位的top（元素當(dāng)前定位離文檔原點(diǎn)的距離）（非首次）
4.2、getPinnedOffset：獲取粘住元素top – target滾動(dòng)條的top
4.3、bottom：如果粘住元素是首次bottom定位的時(shí)候，那么bottom就是 target滾動(dòng)條高度 + target元素的高度 >= 整個(gè)文檔滾動(dòng)條高度 – 粘住元素距離底部的高度
   4.3.1、如果是非首次bottom定位
      1)、如果offsetTop（元素設(shè)定離頂位置的距離）不為空，target的top ?。etpinnedOffset的值 > 粘住元素當(dāng)前定位到top的值
      2)、如果offsetTop為空，target的top 　?。?target元素的高度 > 文檔高度 – 粘住元素距離底部的高度
4、能改變粘住元素的只有他的top，top值為：文檔高度 — 粘住元素高度 — 粘住元素距離底部的高度

5、坑之所在：

1)、top和bottom一起使用的時(shí)候，會(huì)出現(xiàn)沖突，原因：

    Affix-bottom，也就是到達(dá)頁(yè)面底部的時(shí)候，bootstrap是用offset來(lái)設(shè)置的top值，給元素加了position:relative值，這就導(dǎo)致在回到頁(yè)面頂部后，再次向下滾動(dòng)時(shí)候，沒(méi)有任何效果
原因：行內(nèi)樣式設(shè)置的relative會(huì)覆蓋class中設(shè)置的fixed樣式

6、總結(jié)

1)、在top情況表現(xiàn)良好，在bottom情況下需要自己加入手動(dòng)控制
2)、應(yīng)用affix控件，至少要自己重寫(xiě)affix樣式，用于控制粘住條的定位。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附一個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程

本文系列教程整理到：Bootstrap基礎(chǔ)教程 專(zhuān)題中，歡迎點(diǎn)擊學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

最新評(píng)論