Навіть незважаючи на те, що атрибут 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;}.