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