Несмотря на то, что атрибут 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>
По сути, это приведет к тому, что BODY будет иметь размер области просмотра и не прокручивается. Прокручиваемый DIV, вложенный внутрь, будет прокручиваться, как обычно, BODY (без эффекта поворота, поэтому прокрутка останавливается при касании). Фиксированный DIV остается фиксированным без помех.
В качестве примечания: высокое z-indexзначение фиксированного DIV важно, чтобы прокручиваемый DIV оставался позади него. Я обычно добавляю события изменения размера окна и прокрутки также для кроссбраузерности и совместимости с альтернативным разрешением экрана.
Если ничего не помогает, приведенный выше код также будет работать с фиксированными и прокручиваемыми DIV, установленными в {position:absolute;}.