Несмотря на то, что атрибут CSS {position:fixed;} кажется (в основном) работающим на новых устройствах iOS, возможно, что устройство изменится и откатится до {position:relative;} в некоторых случаях, без причины или причины. Обычно очистка кеша поможет, пока что-то не произойдет и не произойдет странная ошибка.
В частности, от самого Apple Подготовка вашего веб-контента для iPad :
Safari на iPad и Safari на iPhone не имеют изменяемых размеров окон. В
Safari на iPhone и iPad, размер окна установлен на размер
экран (за исключением элементов управления пользовательского интерфейса Safari), и не может быть изменен
пользователем. Для перемещения по веб-странице пользователь изменяет уровень масштабирования
и положение окна просмотра, когда они дважды нажмите или ущипнуть, чтобы увеличить или
или касанием и перетаскиванием для перемещения по странице. Как пользователь меняет
уровень масштабирования и положение области просмотра, которую они делают в пределах
видимая область содержимого фиксированного размера (то есть окно). Это означает
элементы веб-страницы, чье положение «зафиксировано» в окне просмотра
может оказаться за пределами видимой области содержимого, вне экрана.
Что иронично, устройства Android, похоже, не имеют этой проблемы. Также вполне возможно использовать {position:absolute;}, когда речь идет о теге body, и не иметь проблем.
Я нашел причину этой причуды; что это событие прокрутки не играет хорошо, когда используется в сочетании с тегом HTML или BODY. Иногда ему не нравится запускать событие, или вам придется ждать, пока событие свитка свитка не закончится, чтобы получить событие. В частности, область просмотра перерисовывается в конце этого события, и фиксированные элементы можно переместить в другое место в области просмотра.
Вот что я делаю: ( избегайте использования окна просмотра и придерживайтесь DOM! )
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$('.viewportSizedBody').css('height',theViewportHeight);
$('#myScrollableBody').css('height',theViewportHeight);
</script>
</html>
По сути, это приведет к тому, что тело будет иметь размер области просмотра и не будет прокручиваться. Прокручиваемый DIV, вложенный внутрь, будет прокручиваться как обычно, как ТЕЛО (минус эффект свинга, поэтому прокрутка останавливается при касании.) Фиксированный DIV остается фиксированным без помех.
Как примечание, высокое значение z-index на фиксированном DIV важно, чтобы прокручиваемый DIV, казалось, был позади него. Я обычно добавляю в окно изменения размера и прокрутки события также для кросс-браузерной и альтернативной совместимости разрешения экрана.
Если ничего не помогает, приведенный выше код также будет работать как с фиксированным, так и с прокручиваемым DIV, установленным на {position:absolute;}.