固定位置工具欄iOS Web應用

Question

我正在開發一個HTML5 Web應用程序，並且迫切需要爲iOS設備的css'position：fixed'替換javascript。

我在從谷歌解釋他們的Gmail移動網絡應用程序在這裏他們的做法的文章跌跌撞撞：http://code.google.com/mobile/articles/webapp_fixed_ui.html

許多類似的JavaScript庫，這個按說，利用觸摸事件和WebKit轉變爲一個容器給予中移動一個div本地滾動的幻覺，並留出固定（實際上是絕對）工具欄的空間。

我試圖實現這個JavaScript類幾乎沒有成功...

目前，我堅持這個錯誤：

"TypeError: 'undefined' is not an object (evaluating 'this.element.style.webkitTransform = 'translate3d(0, ' + offsetY + 'px, 0)'')" 

我通過一個的console.log確保在這一點上，'這個元素'實際上是一個元素，它是。我通過正確傳遞滾動div。

我一直在iOS模擬器以及Mac OS X Safari上進行測試，並且還檢查了GMail的移動網站以確保它們正常工作 - 它們（儘管我不能保證這是的確，他們使用相同的方法）。

我錯過了一些明顯的東西嗎？一些微妙的東西？任何線索將不勝感激。

Answer 1

jQuery Mobile不僅提供了一套漂亮的跨瀏覽器小部件，但它也提供了一種機制，用於fixed positioned toolbars。

Answer 2

jQuery Mobile不支持真正的固定頁眉/頁腳;當你滾動時它們消失，當你完成滾動時它們會重新出現。

Answer 3

JQmobi做了偉大的工作：​​

Answer 4

JUery移動走一段很長的路要走「解決」這個問題。

但強制您的用戶/訪問者加載CSS + JS的414kb！

對於許多慢速3G/Edge連接的用戶，您的頁面/應用程序需要10秒以上的加載時間。 :-(

試試這個在CSS：

body { -webkit-overflow-scrolling: auto; } 

更多詳情：http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/