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)文章
javascript 模擬坦克大戰(zhàn)游戲(html5版)附源碼下載
這篇文章主要介紹了javascript 模擬坦克大戰(zhàn)游戲關(guān)鍵點和遇到的問題及實現(xiàn)代碼,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了使用js繪制幾何圖形的方法的系列文章，本文主要講訴正弦曲線的繪制方法,需要的朋友可以參考下2015-01-01
Javascript的getYear、getFullYear、getUTCFullYear異同分享
getYear、getFullYear、getUTCFullYear都是Javascript的Date對象的方法函數(shù)2011-11-11
本篇文章主要是對判斷js腳本加載完成的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
highlight.js是一款輕量級的Web代碼語法高亮庫。下面通過實例代碼給大家分享JS庫之Highlight.js的用法詳解，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-09-09
Django1.7+JQuery+Ajax驗證用戶注冊集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實現(xiàn)了一個驗證用戶注冊時，用戶名存在不存在的一個小應(yīng)用。注意，驗證存在不存在使用的是Ajax的方式，不用讓用戶點擊按鈕驗證是否存在,需要的朋友可以參考下2017-04-04
JavaScript+Canvas實現(xiàn)簡單的柱狀圖
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用Canvas實現(xiàn)繪制簡單的柱狀圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
JavaScript中for循環(huán)的幾種寫法與效率總結(jié)
每個接觸JS的開發(fā)人員都不可避免的與for循環(huán)打交道，畢竟這是遍歷必不可少的工具之一。然而當(dāng)循環(huán)次數(shù)比較大時，效率問題必須重視。下面這篇文章就主要介紹了JavaScript中幾種for循環(huán)的寫法與效率,需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
js中有各種位置相關(guān)的屬性,平時用起來比較混亂,特此整理一下,下面這篇文章主要給大家介紹了關(guān)于js中易弄混淆的“位置”相關(guān)屬性的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JavaScript運行機制,結(jié)合實例形式分析JavaScript運行機制相關(guān)原理、使用方法及操作注意事項,需要的朋友可以參考下2020-04-04