【转】mip-semi-fixed 走走又停停
寫在前面
MIP 中懸浮元素的特殊情況
其實組件上線已經有一段時間了，最開始看到這個需求是站長提交了一個這中功能的組件過來，不過看過代碼立刻就想到了 MIP 頁面的特殊性：從結果頁打開的 MIP 頁面，是嵌套在一個 iframe 之中的。
在這種特殊的情況下，單純的通過 position: fixed 去實現 DOM 元素的懸浮存在一系列的問題。比如，在 ios 的 safari 瀏覽器中，當用戶滑動頁面的時候，頁面中的懸浮元素會隨著頁面的滑動而閃爍。
因此，MIP 提供了 mip-fixed 懸浮布局組件來解決這些問題。
滑動懸浮的使用場景
顧名思義就是一個 DOM 節(jié)點在滑動的一定位置的時候，變?yōu)閼腋顟B(tài)。滑動懸浮的使用場景還是很多的，比如一些頁面中的導航，當導航滑動到頁面頂部的時候則懸浮在頁面頂部，以方便用戶操作。如：
業(yè)界技術實現與存在的問題
業(yè)界技術實現
目前業(yè)內針對這種滾動頁面定位的情況一般使用兩種邏輯來寫：
（1）將懸浮前后的兩個狀態(tài)分成兩個 dom 節(jié)點（暫時叫做 staticDOM 和 fixedDOM），并通過 JavaScript 控制兩個 dom 節(jié)點的顯示和隱藏。在頁面到達懸浮狀態(tài)之前：staticDOM 節(jié)點顯示，fixedDOM 節(jié)點隱藏；到達懸浮狀態(tài)之后：staticDOM 節(jié)點隱藏，fixedDOM 節(jié)點顯示。
- 優(yōu)點：JavaScript 邏輯簡單
- 缺點：html 代碼冗余
（2）只需要一個 dom 節(jié)點（暫時叫做 stickyDOM），所有的邏輯都通過 JavaScript 控制，也就是說，頁面到達懸浮狀態(tài)的時候，將 stickyDOM 的 CSS 樣式中的 position 屬性的值設置為 fixed， 非懸浮狀態(tài)的時候，將 stickyDOM 的 CSS 樣式中的 position 屬性設置為 static。
- 優(yōu)點：html 代碼清晰
- 缺點：由于每個頁面之間的特性，比較難達到通用性
（3）通過 CSS3 的 position: sticky 實現。這是 CSS3 的新特性，不過目前還不能達到很好的兼容狀態(tài)，特別是我們這種在 iframe 內的特殊情況。關于 sticky 可以參考文檔 position:sticky實現iOS6+下的粘性布局
仍然存在的問題
在 ios 下的 uc、百度和手百瀏覽器中，無論采用哪種方法，由于瀏覽器原因，頁面滑動的時候，所有的 JavaScript 都無法實時計算并執(zhí)行。因此，只有當頁面滑動停止后，JavaScript 才能去計算頁面的位置，然后處理懸浮元素的狀態(tài)，這樣就會看到懸浮元素狀態(tài)的變化有卡頓的情況，對此，目前并沒有十分好的解決辦法，如果大家有更好的辦法，可以反饋我們。
簡介
mip-semi-fixed 是滑動懸浮組件，也可以叫做半懸浮組件，命名為 semi-fixed 的靈感來源于半導體（介于導體（conductor）與絕緣體（insulator）之間）。
代碼設計融合了業(yè)界兩種實現方案，非 SF 下 MIP 頁面中通過 JavaScript 更換 CSS 實現，iframe下的 MIP 頁面由于要特殊處理 fixed 元素，所以會克隆一個 dom 節(jié)點，具體代碼參考 mip-semi-fixed 開源代碼。
屬性及節(jié)點
threshold 屬性（非必選項）
元素 fixed 狀態(tài)時距離頁面頂部的距離，默認是 0。
fixedClassNames 屬性（非必選項）
元素 fixed 狀態(tài)時需要添加的類，如果沒有這個屬性，則 組件只會懸浮不會改變樣式。
div[mip-semi-fixed-container] 子節(jié)點（必選項）
需要滑動后懸浮的 html 代碼的容器，組件科隆的也是這個節(jié)點。
MIP 官網文檔 mip-semi-fixed 滑動懸浮組件 中對組件各個參數的說明、使用以及默認值等進行了詳細的說明。
使用
常規(guī)使用
- 代碼：傳送門
- 示例：傳送門
加關閉按鈕
- 代碼：傳送門
- 示例：傳送門
寫在后面
有任何問題可以到 github issues 提問。
文章作者：Pearl
轉發(fā)自segmentfault
總結
以上是生活随笔為你收集整理的【转】mip-semi-fixed 走走又停停的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Angular性能优化之脏检测
- 下一篇： 广州站长沙龙 MIP 问题及答案