快捷導(dǎo)航

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下運(yùn)行正常，但在iphone safari下就會出現(xiàn)問題，當(dāng)滾動條滾動時，導(dǎo)航條就會出現(xiàn)屏幕的上方，黑乎乎的一塊，很不協(xié)調(diào)。許多人推薦iscroll、jquery mobile等框架，但有時效果不如意或是得閱讀框架源碼進(jìn)行二次開發(fā)，會花費(fèi)好長一段時間的。經(jīng)過一段時間的研究，找到了一種解決辦法，比較簡便，但效果還是比不上pc web。

復(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ā)者帶來了福音。
作者：清流魚

您可能感興趣的文章:

相關(guān)文章

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