mip-semi-fixed 走走又停停

寫在前面

MIP 中懸浮元素的特殊狀況

其實組件上線已經有一段時間了，最開始看到這個需求是站長提交了一個這中功能的組件過來，不過看過代碼馬上就想到了 MIP 頁面的特殊性：從結果頁打開的 MIP 頁面，是嵌套在 一個 iframe 之中。

在這種特殊的狀況下，單純的經過 position: fixed 去實現 DOM 元素的懸浮存在一系列的問題。好比，在 ios 的 safari 瀏覽器中，當用戶滑動頁面的時候，頁面中的懸浮元素會隨着頁面的滑動而閃爍。

所以，MIP 提供了 mip-fixed 懸浮佈局組件來解決這些問題。

滑動懸浮的使用場景

顧名思義就是一個 DOM 節點在滑動的必定位置的時候，變爲懸浮狀態。滑動懸浮的使用場景仍是不少的，好比一些頁面中的導航，當導航滑動到頁面頂部的時候則懸浮在頁面頂部，以方便用戶操做。如：

業界技術實現與存在的問題

業界技術實現

目前業內針對這種滾動頁面定位的狀況通常使用兩種邏輯來寫：

（1）將懸浮先後的兩個狀態分紅兩個 dom 節點（暫時叫作 staticDOM 和 fixedDOM），並經過 js 控制兩個 dom 節點的顯示和隱藏。在頁面到達懸浮狀態以前：staticDOM 節點顯示，fixedDOM 節點隱藏；到達懸浮狀態以後：staticDOM 節點隱藏，fixedDOM 節點顯示。

• 優勢：js 邏輯簡單

• 缺點：html 代碼冗餘

（2）只須要一個 dom 節點（暫時叫作 stickyDOM），全部的邏輯都經過 js 控制，也就是說，頁面到達懸浮狀態的時候，將 stickyDOM 的 css 樣式中的 position 屬性的值設置爲 fixed， 非懸浮狀態的時候，將 stickyDOM 的 css 樣式中的 position 屬性設置爲 static。

• 優勢：html 代碼清晰

• 缺點：因爲每一個頁面之間的特性，比較難達到通用性

（3）經過 css3 的 position: sticky 實現。這是 css3 的新特性，不過目前還不能達到很好的兼容狀態，特別是咱們這種在 iframe 內的特殊狀況。關於 sticky 能夠參考文檔 position:sticky實現iOS6+下的粘性佈局

仍然存在的問題

在 ios 下的 uc、百度和手百瀏覽器中，不管採用哪一種方法，因爲瀏覽器單線程機制，頁面滑動的時候，全部的 js 都沒法實時計算並執行。所以，只有當頁面滑動中止後，js 才能去計算頁面的位置，而後處理懸浮元素的狀態，這樣就會看到懸浮元素狀態的變化有卡頓的狀況，對此，目前並無十分好的解決辦法，若是你們有更好的辦法，能夠反饋咱們。

簡介

mip-semi-fixed 是滑動懸浮組件，也能夠叫作半懸浮組件，命名爲 semi-fixed 的靈感來源於半導體（介於導體（conductor）與絕緣體（insulator）之間）。

代碼設計融合了業界兩種實現方案，非 SF 下 MIP 頁面中經過 js 更換 css 實現，SF 下的 MIP 頁面因爲要特殊處理 fixed 元素，因此會科隆一個 dom 節點，具體代碼參考 mip-semi-fixed 開源代碼。

屬性及節點

• threshold 屬性（非必選項）

  元素 fixed 狀態時距離頁面頂部的距離，默認是 0。

• fixedClassNames 屬性（非必選項）

  元素 fixed 狀態時須要添加的類，若是沒有這個屬性，則 組件只會懸浮不會改變樣式。

• div[mip-semi-fixed-container] 子節點（必選項）

  須要滑動後懸浮的 html 代碼的容器，組件科隆的也是這個節點。

MIP 官網文檔 mip-semi-fixed 滑動懸浮組件 中對組件各個參數的說明、使用以及默認值等進行了詳細的說明。

使用

• 常規使用

  • 代碼：傳送門

  • 示例：傳送門

• 加關閉按鈕

  • 代碼：傳送門

  • 示例：傳送門

寫在後面

有任何問題能夠到 github issues 提問。