A pesar de que el atributo CSS {position:fixed;}parece (principalmente) funcionar en dispositivos iOS más nuevos, es posible tener el dispositivo peculiaridad y reserva {position:relative;}en ocasiones y sin causa o razón. Por lo general, la limpieza del caché ayudará, hasta que algo suceda y la peculiaridad vuelva a ocurrir.
Específicamente, desde la propia Apple Preparando su contenido web para iPad :
Safari en iPad y Safari en iPhone no tienen ventanas redimensionables. En Safari en iPhone y iPad, el tamaño de la ventana se establece en el tamaño de la pantalla (menos los controles de la interfaz de usuario de Safari) y el usuario no puede cambiarlo. Para moverse por una página web, el usuario cambia el nivel de zoom y la posición de la ventana gráfica al tocar dos veces o pellizcar para acercar o alejar, o al tocar y arrastrar para desplazar la página. A medida que un usuario cambia el nivel de zoom y la posición de la ventana gráfica, lo hace dentro de un área de contenido visible de tamaño fijo (es decir, la ventana). Esto significa que los elementos de la página web que tienen su posición "fija" en la ventana gráfica pueden terminar fuera del área de contenido visible, fuera de la pantalla.
Lo que es irónico, los dispositivos Android no parecen tener este problema. También es completamente posible usarlo {position:absolute;}en referencia a la etiqueta del cuerpo y no tener ningún problema.
Encontré la causa raíz de este capricho; que el evento de desplazamiento no se reproduce bien cuando se usa junto con la etiqueta HTML o BODY. A veces no le gusta iniciar el evento, o tendrá que esperar hasta que el evento de desplazamiento de desplazamiento finalice para recibir el evento. Específicamente, la ventana gráfica se vuelve a dibujar al final de este evento y los elementos fijos se pueden volver a colocar en otro lugar de la ventana gráfica.
Entonces, esto es lo que hago: (¡ evita usar la ventana gráfica y quédate con el 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>
En esencia, esto hará que el CUERPO sea del tamaño de la ventana gráfica y no desplazable. El DIV desplazable anidado en el interior se desplazará como lo haría normalmente el CUERPO (menos el efecto de oscilación, por lo que el desplazamiento se detiene en el toque). El DIV fijo permanece fijo sin interferencias.
Como nota al margen, un z-indexvalor alto en el DIV fijo es importante para mantener el DIV desplazable que parece estar detrás de él. Normalmente agrego eventos de cambio de tamaño y desplazamiento de ventana también para compatibilidad entre navegadores y resoluciones de pantalla alternativas.
Si todo lo demás falla, el código anterior también funcionará con los DIV fijos y desplazables establecidos en {position:absolute;}.