成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

WEB移動(dòng)端粘黏吸頂效果的解決方案

figofuture / 1579人閱讀

摘要：原文鏈接一般的吸頂，通常是給上一個(gè)定位便可實(shí)現(xiàn)，而類似于上圖這樣的粘黏吸頂，也是一個(gè)比較常見的需求粘黏吸頂大概的思路是這樣首先，給吸頂欄一個(gè)或者定位，通過去監(jiān)聽事件觸發(fā)一個(gè)判斷吸頂欄高度的函數(shù)，當(dāng)吸頂欄的高度距離可視區(qū)域頂部小于等于時(shí)，將其

原文鏈接: Fyerl"s Blog

一般的header吸頂，通常是給上一個(gè)fixed定位便可實(shí)現(xiàn)，而類似于上圖這樣的“粘黏吸頂”，也是一個(gè)比較常見的需求

“粘黏吸頂”大概的思路是這樣：首先，給吸頂欄一個(gè)absolute或者relative定位，通過js去監(jiān)聽scroll事件觸發(fā)一個(gè)判斷吸頂欄高度的函數(shù)，當(dāng)吸頂欄的高度距離可視區(qū)域頂部小于等于0時(shí)，將其定位方式替換成fixed，大于0時(shí)再替換回absolute或者relative

以上的思路在PC端和安卓端均是可行的，但在iOS上，判斷高度的函數(shù)卻并不會(huì)隨著scroll事件每次都觸發(fā)，而是在滑動(dòng)停止后才去觸發(fā)這個(gè)函數(shù)

google一下“iOS onscroll event delay”得知，這是iOS8作出的改變，在web頁面滾動(dòng)時(shí)，不觸發(fā)和執(zhí)行js
http://developer.telerik.com/...

這里我只是需要實(shí)現(xiàn)一個(gè)吸頂效果，不涉及其他邏輯代碼，如果一定要通過scroll觸發(fā)的話，只能使用iSroll等其他第三方庫來取代iOS的原生滾動(dòng)

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

所以最后的解決方案就是：
首先判斷當(dāng)前系統(tǒng)，如果是Android，就通過常規(guī)的監(jiān)聽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;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50486.html

相關(guān)文章

  • WEB移動(dòng)端粘黏吸頂效果的解決方案

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

    macg0406 評(píng)論0 收藏0

  • WEB移動(dòng)端粘黏吸頂效果的解決方案

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

    Cobub 評(píng)論0 收藏0

  • Vue開發(fā)——實(shí)現(xiàn)吸頂效果

    摘要：因?yàn)轫?xiàng)目需求，最近開始轉(zhuǎn)到微信公眾號(hào)開發(fā)，接觸到了框架，這個(gè)效果的實(shí)現(xiàn)雖說是基于框架下實(shí)現(xiàn)的，但是同樣也可以借鑒到其他地方，原理都是一樣的。上面我們得到了一個(gè)的屬性值，接下來我們只需要根據(jù)它的值來設(shè)置吸頂元素的屬性就可以了。 因?yàn)轫?xiàng)目需求，最近開始轉(zhuǎn)到微信公眾號(hào)開發(fā)，接觸到了Vue框架，這個(gè)效果的實(shí)現(xiàn)雖說是基于Vue框架下實(shí)現(xiàn)的，但是同樣也可以借鑒到其他地方，原理都是一樣的。 進(jìn)入正題...

    amuqiao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<