移動端position:fixed小結

fixed在移動端是個坑,兼容性就是個極品。

ios的bug比較多,詳見https://github.com/maxzhang/maxzhang.github.com/issues/2

作者建議我們安卓還是使用fixed比較好,ios用iscroll來填坑比較好


關於fixed一些小細節還可以參考一下:

https://github.com/maxzhang/maxzhang.github.com/issues/11

裏面提及到的例子:http://output.jsbin.com/omaCOSir/latest

佈局的方法是:

<header class="relative">
    <div class="fixed">...</div>
</header>
<div class="main"></div>
<footer>
    <div class="fixed">...</div>
</footer>

有一點不明白的是爲什麼要用relative來表示header和footer,雖然真正起作用的是fixed。


如果fixed不支持,有一個我個人認爲很山寨的方法,就是用absolute,onscroll的時候計算$(window).scrollTop(),可是這個方法首先在展示的時候不完美,一點是有時候的計算是小數點,所以會空出1個px(當然可以-1px來補),還有就是頻繁計算和重新渲染。


安卓4.4.2有些機子是可以支持的,有些的支持度不夠,渲染的時候不給力,但勉強可以渲染,開啓硬件加速更佳


沒有比較好的辦法,不過有無敵方法:iScroll

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章