iphone safari不支持position fixed的解決方法
更新時(shí)間：2012年05月04日 00:48:20 作者：
最近一直在做移動(dòng)web開發(fā)，開發(fā)過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情
需求是這樣的，許多pc web頁面的導(dǎo)航都是固定的，比如google的首頁，現(xiàn)在要將這種固定的導(dǎo)航轉(zhuǎn)移到mobile web下，很自然地就會想到position：fixed; bottom: 0，android下運(yùn)行正常，但在iphone safari下就會出現(xiàn)問題，當(dāng)滾動(dòng)條滾動(dòng)時(shí)，導(dǎo)航條就會出現(xiàn)屏幕的上方，黑乎乎的一塊，很不協(xié)調(diào)。許多人推薦iscroll、jquery mobile等框架，但有時(shí)效果不如意或是得閱讀框架源碼進(jìn)行二次開發(fā)，會花費(fèi)好長一段時(shí)間的。經(jīng)過一段時(shí)間的研究，找到了一種解決辦法，比較簡便，但效果還是比不上pc web。
<div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div>
<script type="text/javascript">
$(window).scroll(function(){
// 重點(diǎn)就是下面這一條語句的實(shí)現(xiàn)
$("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });
});
</script>
不過最新ios5已經(jīng)支持了position: fixed，給廣大web前端開發(fā)者帶來了福音。
作者：清流魚
復(fù)制代碼 代碼如下:
<div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div>
<script type="text/javascript">
$(window).scroll(function(){
// 重點(diǎn)就是下面這一條語句的實(shí)現(xiàn)
$("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });
});
</script>
不過最新ios5已經(jīng)支持了position: fixed，給廣大web前端開發(fā)者帶來了福音。
作者：清流魚
您可能感興趣的文章:
- iOS9中的WebKit 與 Safari帶來的驚喜
- 禁止iPhone Safari video標(biāo)簽視頻自動(dòng)全屏的辦法
- javascript實(shí)現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器
- js代碼判斷瀏覽器種類IE、FF、Opera、Safari、chrome及版本
- jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- js實(shí)現(xiàn)select二級聯(lián)動(dòng)下拉菜單
- jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
- jQuery結(jié)合CSS制作漂亮的select下拉菜單
- IOS中safari下的select下拉菜單文字過長不換行的解決方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js html實(shí)現(xiàn)計(jì)算器功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
javascript數(shù)字格式化通用類 accounting.js使用
accounting.js 是一個(gè)非常小的JavaScript方法庫用于對數(shù)字，金額和貨幣進(jìn)行格式化。并提供可選的Excel風(fēng)格列渲染。它沒有依賴任何JS框架。貨幣符號等可以按需求進(jìn)行定制2012-08-08
這篇文章主要為大家詳細(xì)介紹了小程序自定義tabBar組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了更靠譜的橫豎屏檢測方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
AngularJs中Bootstrap3 datetimepicker使用實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJs中Bootstrap3 datetimepicker使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了js子頁面如何獲取父頁面數(shù)據(jù),需要的朋友可以參考下2014-05-05
第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果
這篇文章主要為大家詳細(xì)介紹了第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果的相關(guān)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
微信小程序表單驗(yàn)證form提交錯(cuò)誤提示效果
這篇文章主要為大家詳細(xì)介紹了微信小程序表單驗(yàn)證form提交錯(cuò)誤提示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
javascript針對不確定函數(shù)的執(zhí)行方法
這篇文章主要介紹了javascript針對不確定函數(shù)的執(zhí)行方法,實(shí)例分析了eval函數(shù)及符號屬性兩種執(zhí)行方式,需要的朋友可以參考下2015-12-12