資訊專欄INFORMATION COLUMN
摘要：代碼設(shè)計(jì)融合了業(yè)界兩種實(shí)現(xiàn)方案，非下頁面中通過更換實(shí)現(xiàn)，下的頁面由于要特殊處理元素，所以會(huì)科隆一個(gè)節(jié)點(diǎn)，具體代碼參考開源代碼。子節(jié)點(diǎn)必選項(xiàng)需要滑動(dòng)后懸浮的代碼的容器，組件科隆的也是這個(gè)節(jié)點(diǎn)。
寫在前面 MIP 中懸浮元素的特殊情況
其實(shí)組件上線已經(jīng)有一段時(shí)間了，最開始看到這個(gè)需求是站長(zhǎng)提交了一個(gè)這中功能的組件過來，不過看過代碼立刻就想到了 MIP 頁面的特殊性：從結(jié)果頁打開的 MIP 頁面，是嵌套在 一個(gè) iframe 之中。
在這種特殊的情況下，單純的通過 position: fixed 去實(shí)現(xiàn) DOM 元素的懸浮存在一系列的問題。比如，在 ios 的 safari 瀏覽器中，當(dāng)用戶滑動(dòng)頁面的時(shí)候，頁面中的懸浮元素會(huì)隨著頁面的滑動(dòng)而閃爍。
因此，MIP 提供了 mip-fixed 懸浮布局組件來解決這些問題。
滑動(dòng)懸浮的使用場(chǎng)景顧名思義就是一個(gè) DOM 節(jié)點(diǎn)在滑動(dòng)的一定位置的時(shí)候，變?yōu)閼腋顟B(tài)?；瑒?dòng)懸浮的使用場(chǎng)景還是很多的，比如一些頁面中的導(dǎo)航，當(dāng)導(dǎo)航滑動(dòng)到頁面頂部的時(shí)候則懸浮在頁面頂部，以方便用戶操作。如：
業(yè)界技術(shù)實(shí)現(xiàn)與存在的問題 業(yè)界技術(shù)實(shí)現(xiàn)目前業(yè)內(nèi)針對(duì)這種滾動(dòng)頁面定位的情況一般使用兩種邏輯來寫：
（1）將懸浮前后的兩個(gè)狀態(tài)分成兩個(gè) dom 節(jié)點(diǎn)（暫時(shí)叫做 staticDOM 和 fixedDOM），并通過 js 控制兩個(gè) dom 節(jié)點(diǎn)的顯示和隱藏。在頁面到達(dá)懸浮狀態(tài)之前：staticDOM 節(jié)點(diǎn)顯示，fixedDOM 節(jié)點(diǎn)隱藏；到達(dá)懸浮狀態(tài)之后：staticDOM 節(jié)點(diǎn)隱藏，fixedDOM 節(jié)點(diǎn)顯示。
優(yōu)點(diǎn)：js 邏輯簡(jiǎn)單
缺點(diǎn)：html 代碼冗余
（2）只需要一個(gè) dom 節(jié)點(diǎn)（暫時(shí)叫做 stickyDOM），所有的邏輯都通過 js 控制，也就是說，頁面到達(dá)懸浮狀態(tài)的時(shí)候，將 stickyDOM 的 css 樣式中的 position 屬性的值設(shè)置為 fixed， 非懸浮狀態(tài)的時(shí)候，將 stickyDOM 的 css 樣式中的 position 屬性設(shè)置為 static。
優(yōu)點(diǎn)：html 代碼清晰
缺點(diǎn)：由于每個(gè)頁面之間的特性，比較難達(dá)到通用性
（3）通過 css3 的 position: sticky 實(shí)現(xiàn)。這是 css3 的新特性，不過目前還不能達(dá)到很好的兼容狀態(tài)，特別是我們這種在 iframe 內(nèi)的特殊情況。關(guān)于 sticky 可以參考文檔 position:sticky實(shí)現(xiàn)iOS6+下的粘性布局
仍然存在的問題在 ios 下的 uc、百度和手百瀏覽器中，無論采用哪種方法，由于瀏覽器單線程機(jī)制，頁面滑動(dòng)的時(shí)候，所有的 js 都無法實(shí)時(shí)計(jì)算并執(zhí)行。因此，只有當(dāng)頁面滑動(dòng)停止后，js 才能去計(jì)算頁面的位置，然后處理懸浮元素的狀態(tài)，這樣就會(huì)看到懸浮元素狀態(tài)的變化有卡頓的情況，對(duì)此，目前并沒有十分好的解決辦法，如果大家有更好的辦法，可以反饋我們。
簡(jiǎn)介mip-semi-fixed 是滑動(dòng)懸浮組件，也可以叫做半懸浮組件，命名為 semi-fixed 的靈感來源于半導(dǎo)體（介于導(dǎo)體（conductor）與絕緣體（insulator）之間）。
代碼設(shè)計(jì)融合了業(yè)界兩種實(shí)現(xiàn)方案，非 SF 下 MIP 頁面中通過 js 更換 css 實(shí)現(xiàn)，SF 下的 MIP 頁面由于要特殊處理 fixed 元素，所以會(huì)科隆一個(gè) dom 節(jié)點(diǎn)，具體代碼參考 mip-semi-fixed 開源代碼。
屬性及節(jié)點(diǎn)
threshold 屬性（非必選項(xiàng)）
元素 fixed 狀態(tài)時(shí)距離頁面頂部的距離，默認(rèn)是 0。
fixedClassNames 屬性（非必選項(xiàng)）
元素 fixed 狀態(tài)時(shí)需要添加的類，如果沒有這個(gè)屬性，則 組件只會(huì)懸浮不會(huì)改變樣式。
div[mip-semi-fixed-container] 子節(jié)點(diǎn)（必選項(xiàng)）
需要滑動(dòng)后懸浮的 html 代碼的容器，組件科隆的也是這個(gè)節(jié)點(diǎn)。
MIP 官網(wǎng)文檔 mip-semi-fixed 滑動(dòng)懸浮組件 中對(duì)組件各個(gè)參數(shù)的說明、使用以及默認(rèn)值等進(jìn)行了詳細(xì)的說明。
使用
常規(guī)使用
代碼：傳送門
示例：傳送門
加關(guān)閉按鈕
代碼：傳送門
示例：傳送門
寫在后面有任何問題可以到 github issues 提問。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82307.html
摘要：持續(xù)更新的筆記，鏈接地址此篇文章的筆記地址字符到底發(fā)生了什么變化走走看看系列，特別鳴謝奇舞讀書會(huì)看正文之前，先思考一下，為什么你看的各種權(quán)威指南里提到的 持續(xù)更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發(fā)生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會(huì)~ 看正文之前，先思考一下，為什么你看的ES6各種權(quán)威指南里提到的
摘要：在月日下午的新制造專場(chǎng)分論壇上，華中數(shù)控董事長(zhǎng)陳吉紅說，通過數(shù)控機(jī)床在左走走右走走時(shí)的軸承等設(shè)備的數(shù)據(jù)變化，可以對(duì)其健康狀況進(jìn)行檢測(cè)。傳統(tǒng)的數(shù)控機(jī)床本身有很多傳感器，小時(shí)可以采集產(chǎn)生的數(shù)據(jù)?，F(xiàn)在華中數(shù)控會(huì)每天早上讓數(shù)控機(jī)床做健康體檢，跳廣場(chǎng)舞，左走走，右走走。在12月15日下午的新制造專場(chǎng)分論壇上，華中數(shù)控董事長(zhǎng)陳吉紅說，通過數(shù)控機(jī)床在左走走、右走走時(shí)的軸承等設(shè)備的數(shù)據(jù)變化，可以對(duì)其健康狀況...
摘要：塊級(jí)聲明塊級(jí)聲明是用于聲明在指定塊的作用域之外無法訪問的變量。美元符號(hào)可以放到任何一個(gè)位置，甚至單獨(dú)一個(gè)美元符號(hào)。塊級(jí)函數(shù)從開始，在嚴(yán)格模式下，塊里的函數(shù)作用域?yàn)檫@個(gè)塊。 持續(xù)更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發(fā)生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會(huì)~ 塊級(jí)作用域又稱詞法作用域，存在于： 函數(shù)內(nèi)部（...
摘要：今天我們就討論下編程之外的個(gè)拓展自己的方式。不同的人對(duì)于攀登珠峰可能有不同理解，有些人眼中是特種旅游項(xiàng)目，有些人眼中是超越自身生理心理修行，有些人眼中的炫耀工具，有些人眼中的一生的奮斗目標(biāo)，有些人眼中的商業(yè)生意，有些人眼中的終身事業(yè)。 編程不是目的，然而編程之外，有更多精彩需要我們體會(huì)，畢竟人生可不止于編程。今天我們就討論下編程之外的8個(gè)拓展自己的方式。如果你有自己的好的方式，歡迎參與...
閱讀 2631·2021-11-17 17:00
閱讀 1884·2021-10-11 10:57
閱讀 3751·2021-09-09 11:33
閱讀 921·2021-09-09 09:33
閱讀 3558·2019-08-30 14:20
閱讀 3324·2019-08-29 11:25
閱讀 2809·2019-08-26 13:48
閱讀 747·2019-08-26 11:52
