国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WEB移動端粘黏吸頂效果的解決方案

macg0406 / 3389人閱讀

摘要:原文鏈接一般的吸頂,通常是給上一個定位便可實現,而類似于上圖這樣的粘黏吸頂,也是一個比較常見的需求粘黏吸頂大概的思路是這樣首先,給吸頂欄一個或者定位,通過去監聽事件觸發一個判斷吸頂欄高度的函數,當吸頂欄的高度距離可視區域頂部小于等于時,將其

原文鏈接: Fyerl"s Blog

一般的header吸頂,通常是給上一個fixed定位便可實現,而類似于上圖這樣的“粘黏吸頂”,也是一個比較常見的需求

“粘黏吸頂”大概的思路是這樣:首先,給吸頂欄一個absolute或者relative定位,通過js去監聽scroll事件觸發一個判斷吸頂欄高度的函數,當吸頂欄的高度距離可視區域頂部小于等于0時,將其定位方式替換成fixed,大于0時再替換回absolute或者relative

以上的思路在PC端和安卓端均是可行的,但在iOS上,判斷高度的函數卻并不會隨著scroll事件每次都觸發,而是在滑動停止后才去觸發這個函數

google一下“iOS onscroll event delay”得知,這是iOS8作出的改變,在web頁面滾動時,不觸發和執行js
http://developer.telerik.com/...

這里我只是需要實現一個吸頂效果,不涉及其他邏輯代碼,如果一定要通過scroll觸發的話,只能使用iSroll等其他第三方庫來取代iOS的原生滾動

回到吸頂問題,為了一個效果引入一個第三方庫的成本有點大,于是又尋找了一下,發現了一個知道但是沒有重視過的position屬性sticky,顧名思義,這個屬性的作用就是粘黏,理論上是不需要通過js就能實現“粘黏吸頂”的,但是這個屬性在PC端以及安卓移動端的表現不盡人意,兼容性還是差了點,然而,在iOS端的表現卻非常出色,iOS6.1以上的系統均支持

所以最后的解決方案就是:
首先判斷當前系統,如果是Android,就通過常規的監聽scroll事件并使用fixed定位;iOS便使用sticky定位

//Android
.tab-box-fixed {
  position: fixed;
  z-index: 5;
}
//iOS
.tab-box-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
}

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

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

相關文章

  • WEB移動粘黏吸頂效果解決方案

    摘要:原文鏈接一般的吸頂,通常是給上一個定位便可實現,而類似于上圖這樣的粘黏吸頂,也是一個比較常見的需求粘黏吸頂大概的思路是這樣首先,給吸頂欄一個或者定位,通過去監聽事件觸發一個判斷吸頂欄高度的函數,當吸頂欄的高度距離可視區域頂部小于等于時,將其 原文鏈接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...

    Cobub 評論0 收藏0
  • WEB移動粘黏吸頂效果解決方案

    摘要:原文鏈接一般的吸頂,通常是給上一個定位便可實現,而類似于上圖這樣的粘黏吸頂,也是一個比較常見的需求粘黏吸頂大概的思路是這樣首先,給吸頂欄一個或者定位,通過去監聽事件觸發一個判斷吸頂欄高度的函數,當吸頂欄的高度距離可視區域頂部小于等于時,將其 原文鏈接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...

    figofuture 評論0 收藏0
  • Vue開發——實現吸頂效果

    摘要:因為項目需求,最近開始轉到微信公眾號開發,接觸到了框架,這個效果的實現雖說是基于框架下實現的,但是同樣也可以借鑒到其他地方,原理都是一樣的。上面我們得到了一個的屬性值,接下來我們只需要根據它的值來設置吸頂元素的屬性就可以了。 因為項目需求,最近開始轉到微信公眾號開發,接觸到了Vue框架,這個效果的實現雖說是基于Vue框架下實現的,但是同樣也可以借鑒到其他地方,原理都是一樣的。 進入正題...

    amuqiao 評論0 收藏0

發表評論

0條評論

macg0406

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<