Веб-приложение iOS с фиксированной позицией

Question

Я занимаюсь разработкой веб-приложения на HTML5 и остро нуждаюсь в замене JavaScript для css 'position: fixed' для <5 устройств iOS. </p>

Я наткнулся на статью от Google, объясняющую их подход к их мобильному веб-приложению 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, чтобы убедиться, что на этом этапе 'this.element' фактически является элементом, и это так. Я передаю скроллер div правильно.

Я тестировал на iOS Simulator, а также Mac OS X Safari, а также проверил мобильный сайт GMail на обоих, чтобы убедиться, что они работают должным образом - они работают (хотя я не могу гарантировать, что это действительно так , те же методы, которые они используют).

Я что-то упускаю из виду? Что-то тонкое? Любые подсказки будут оценены.

Answer 1

jQuery Mobile не поддерживает настоящие фиксированные колонтитулы; они исчезают, когда вы прокручиваете, и появляются снова, когда вы заканчиваете прокручивать.

Answer 2

JUery Mobile имеет большое значение для «решения» этой проблемы.

Но заставляет ваших пользователей / посетителей загружать 414kb CSS + JS!

Для многих людей, использующих медленные соединения 3G / Edge, ваша страница / приложение будет загружаться более 10 секунд. : - (

Попробуйте это в вашем CSS :

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

Подробнее на: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

Answer 3

JQmobi отлично работает: http://jqmobi.com/testdrive/

Answer 4

jQuery Mobile не только предоставляет набор красивых и кросс-браузерных виджетов, но также предоставляет механизм для фиксированных панелей инструментов .