Anche se l'attributo CSS {position:fixed;}sembra (principalmente) funzionare su dispositivi iOS più recenti, è possibile avere il dispositivo stravagante e fallback {position:relative;}in occasione e senza causa o motivo. Solitamente svuotare la cache aiuterà, fino a quando non succede qualcosa e la stranezza si ripete.
In particolare, dalla stessa Apple Preparazione dei contenuti Web per iPad :
Safari su iPad e Safari su iPhone non hanno finestre ridimensionabili. In Safari su iPhone e iPad, la dimensione della finestra è impostata sulla dimensione dello schermo (meno i controlli dell'interfaccia utente di Safari) e non può essere modificata dall'utente. Per spostarsi all'interno di una pagina Web, l'utente modifica il livello di zoom e la posizione della finestra mentre tocca due volte o pizzica per ingrandire o ridurre, oppure toccando e trascinando per eseguire una panoramica della pagina. Quando un utente modifica il livello di zoom e la posizione della finestra, lo fa all'interno di un'area di contenuto visualizzabile di dimensioni fisse (ovvero la finestra). Ciò significa che gli elementi di una pagina Web che hanno la loro posizione "fissa" sul viewport possono finire fuori dall'area di contenuto visualizzabile, fuori dallo schermo.
Ciò che è ironico, i dispositivi Android non sembrano avere questo problema. Inoltre è del tutto possibile utilizzare {position:absolute;}quando si fa riferimento al tag body e non si verificano problemi.
Ho trovato la causa principale di questa stranezza; che l'evento scroll non funziona bene se usato insieme al tag HTML o BODY. A volte non gli piace lanciare l'evento, oppure dovrai aspettare fino a quando l'evento di swing scroll non è terminato per ricevere l'evento. In particolare, il viewport viene ridisegnato alla fine di questo evento e gli elementi fissi possono essere riposizionati in qualche altro punto del viewport.
Quindi questo è quello che faccio: ( evita di usare il viewport e mantieni il 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>
In sostanza, ciò farà sì che il CORPO abbia le dimensioni della finestra e non sia scorrevole. Il DIV scorrevole annidato all'interno scorrerà come farebbe normalmente il CORPO (meno l'effetto di oscillazione, quindi lo scorrimento si interrompe al tocco). Il DIV fisso rimane fisso senza interferenze.
Come nota a margine, un z-indexvalore elevato sul DIV fisso è importante per mantenere il DIV scorrevole che appare dietro di esso. Di solito aggiungo il ridimensionamento della finestra e scorro gli eventi anche per la compatibilità tra browser e risoluzione dello schermo alternativa.
Se tutto il resto fallisce, il codice sopra funzionerà anche con i DIV fissi e scorrevoli impostati su {position:absolute;}.