iphone safari不支持position fixed的解決辦法

最近一直在做移動web開發，開發過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情。需求是這樣的，許多pc web頁面的導航都是固定的，比如google的首頁，現在要將這種固定的導航轉移到mobile web下，很自然地就會想到position：fixed; bottom: 0，android下運行正常，但在iphone safari下就會出現問題，當滾動條滾動時，導航條就會出現屏幕的上方，黑乎乎的一塊，很不協調。許多人推薦iscroll、jquery mobile等框架，但有時效果不如意或是得閱讀框架源碼進行二次開發，會花費好長一段時間的。經過一段時間的研究，找到了一種解決辦法，比較簡便，但效果還是比不上pc web。

  1: <div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div>
  2: <script type="text/javascript">
  3: $(window).scroll(function(){
  4:     // 重點就是下面這一條語句的實現
  5:     $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });    
  6: });        
  7: </script>

不過最新ios5已經支持了position: fixed，給廣大web前端開發者帶來了福音。

---end

作者：清流魚

出處：http://www.cnblogs.com/qingliuyu/

新浪微博：http://weibo.com/qingliuyu

本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接。