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