Как реализовать фиксированный заголовок и анимацию, например слайд, в веб-приложении HTML5 для iPhone (как это делает Google Music)?

Question

Я только что видел http://music.google.com, который является веб-приложением HTLM5.

Мне интересно, как можно исправить заголовок?И использовать анимацию, как слайд с iPhone и т. Д ...?Кажется, это похоже на приложение для iPhone!

Помогите, пожалуйста?

PS: без jQuery Mobile, спасибо

Answer 1

используйте это http://cubiq.org/iscroll-4. Это хорошо проверено и работает на наших мобильных приложениях.Вы можете попробовать их демо тоже.http://cubiq.org/dropbox/iscroll4/examples/simple/

Answer 2

То, к чему это сводится, является следующим в мобильном Интернете.Вы НЕ можете делать «position: fixed», поэтому вместо этого вы должны создать div, чтобы прокручивать содержимое самостоятельно.

1) Создайте div заголовка и установите абсолютную позицию.Установите высоту / ширину.

2) Создайте второй div (content div), который представляет собой высоту / ширину (обычно остальная часть страницы).Затем вам нужно найти инструмент прокрутки.Проверьте https://github.com/appMobi/aUX_web для aUX_webScroller.Поскольку вы прокручиваете второй div, заголовок останется фиксированным в позиции.

Ian

Answer 3

У вас есть два вопроса, но:

1. Объявление CSS position: fixed поддерживается Safari на iOS 5 (см., Например, http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5),, ноне ранее.

   Я не уверен, как добиться фиксированного заголовка в более ранних версиях iOS.

2. Safari поддерживает (и я думаю, что изобрел) CSS переходы и анимации .

   Я полагаю, что они используют встроенные библиотеки анимации iOS, поэтому они должны работать намного лучше, чем пытаться делать то же самое с помощью JavaScript.