mip-semi-fixed 走走又停停

yiliang 發布于2019-08-20 15:31 / 2220人閱讀

摘要：代碼設計融合了業界兩種實現方案，非下頁面中通過更換實現，下的頁面由于要特殊處理元素，所以會科隆一個節點，具體代碼參考開源代碼。子節點必選項需要滑動后懸浮的代碼的容器，組件科隆的也是這個節點。

寫在前面 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 提問。

云服務器 GPU云服務器頂級域名又分為又一個典型實例 php又指針嗎云計算又叫什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82307.html

ES6走走看看—字符到底發生了什么變化

摘要：持續更新的筆記，鏈接地址此篇文章的筆記地址字符到底發生了什么變化走走看看系列，特別鳴謝奇舞讀書會看正文之前，先思考一下，為什么你看的各種權威指南里提到的持續更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會~ 看正文之前，先思考一下，為什么你看的ES6各種權威指南里提到的

lentoo 2019-08-23 11:49 評論0 收藏0
用云計算為數控機床服務

摘要：在月日下午的新制造專場分論壇上，華中數控董事長陳吉紅說，通過數控機床在左走走右走走時的軸承等設備的數據變化，可以對其健康狀況進行檢測。傳統的數控機床本身有很多傳感器，小時可以采集產生的數據。現在華中數控會每天早上讓數控機床做健康體檢，跳廣場舞，左走走，右走走。在12月15日下午的新制造專場分論壇上，華中數控董事長陳吉紅說，通過數控機床在左走走、右走走時的軸承等設備的數據變化，可以對其健康狀況...

youkede 2019-04-30 11:28 評論0 收藏0
ES6走走看看—由塊級作用域引出的一場變革

摘要：塊級聲明塊級聲明是用于聲明在指定塊的作用域之外無法訪問的變量。美元符號可以放到任何一個位置，甚至單獨一個美元符號。塊級函數從開始，在嚴格模式下，塊里的函數作用域為這個塊。持續更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會~ 塊級作用域又稱詞法作用域，存在于：函數內部（...

荊兆峰 2019-08-23 11:49 評論0 收藏0
編程之外，8種拓展方式

摘要：今天我們就討論下編程之外的個拓展自己的方式。不同的人對于攀登珠峰可能有不同理解，有些人眼中是特種旅游項目，有些人眼中是超越自身生理心理修行，有些人眼中的炫耀工具，有些人眼中的一生的奮斗目標，有些人眼中的商業生意，有些人眼中的終身事業。編程不是目的，然而編程之外，有更多精彩需要我們體會，畢竟人生可不止于編程。今天我們就討論下編程之外的8個拓展自己的方式。如果你有自己的好的方式，歡迎參與...

劉玉平 2019-08-19 18:17 評論0 收藏0