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

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

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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

http://cubiq.org/iscroll

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

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

Ответ 5

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