摘要:原文鏈接一般的吸頂,通常是給上一個(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/50486.html
摘要:原文鏈接一般的吸頂,通常是給上一個(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...
摘要:原文鏈接一般的吸頂,通常是給上一個(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...
摘要:因?yàn)轫?xiàng)目需求,最近開始轉(zhuǎn)到微信公眾號開發(fā),接觸到了框架,這個(gè)效果的實(shí)現(xiàn)雖說是基于框架下實(shí)現(xiàn)的,但是同樣也可以借鑒到其他地方,原理都是一樣的。上面我們得到了一個(gè)的屬性值,接下來我們只需要根據(jù)它的值來設(shè)置吸頂元素的屬性就可以了。 因?yàn)轫?xiàng)目需求,最近開始轉(zhuǎn)到微信公眾號開發(fā),接觸到了Vue框架,這個(gè)效果的實(shí)現(xiàn)雖說是基于Vue框架下實(shí)現(xiàn)的,但是同樣也可以借鑒到其他地方,原理都是一樣的。 進(jìn)入正題...
閱讀 2566·2021-11-22 13:53
閱讀 4069·2021-09-28 09:47
閱讀 858·2021-09-22 15:33
閱讀 808·2020-12-03 17:17
閱讀 3315·2019-08-30 13:13
閱讀 2121·2019-08-29 16:09
閱讀 1176·2019-08-29 12:24
閱讀 2452·2019-08-28 18:14