Создание «липкого» элемента с фиксированной позицией, который работает в iOS Safari

Question

В iOS-сафари панорамирование одним пальцем не генерирует никаких событий, пока пользователь не прекратит панорамирование. Событие onscroll генерируется только тогда, когда страница перестает двигаться и перерисовывается.

Мне нужен способ обнаружения прокрутки в реальном времени. В частности, я хочу создать липкое меню, которое также будет работать в iOS-сафари. В не мобильных браузерах закрепление меню может быть выполнено путем переключения между позицией относительно позиции и фиксированной позицией элемента при прослушивании событий прокрутки. Этот метод не будет работать в мобильном браузере, потому что события onscroll не запускаются постоянно. Что я могу сделать?

Answer 1

Отвечая на мой собственный вопрос.iOS7 теперь поддерживает позицию: sticky Демо: http://html5 -demos.appspot.com / static / css / sticky.html

Answer 2

Я недавно потратил много часов, пытаясь найти практическое решение для той же проблемы.Нет правильного способа сделать это, хотя есть несколько приличных хаков (большинство из них уже упоминалось).Проблема в том, что JavaScript останавливается во время прокрутки пользователем.Это имеет смысл, когда вы рассматриваете последствия, но это чертовски сложно реализовать элемент с фиксированным позиционированием.

Лучшее, что мне удалось найти, - это замечательный пост от людей из Google.Вы можете проверить http://gmail.com в мобильном сафари, чтобы увидеть его в действии.

https://developers.google.com/mobile/articles/webapp_fixed_ui

Надеюсь, это поможет.

Answer 3

У меня была похожая проблема и привязанные обработчики к touchstart / touchmove / touchend, использующие jquery для обнаружения прокрутки одним пальцем, и это работало отлично. В моем случае мне нужно было переместить другой элемент на ту же сумму, что и попытка переместить другой элемент, и он обновился, когда была сделана попытка прокрутки, поэтому он должен соответствовать вашим требованиям.

Answer 4

Старая тема, конечно, но я вижу много посещений здесь. Если все, что вы хотите, это липкое меню, вы можете использовать фиксированное позиционирование. Там нет необходимости в iScroll.

Answer 5

Если все, что вам нужно, это меню, вы можете избежать головной боли, используя существующую библиотеку. У меня был успех с iScroll:

http://cubiq.org/iscroll

По крайней мере, вы можете посмотреть, как это работает, и основать свое решение на этом.

Счастливого взлома!