Même si l'attribut CSS {position:fixed;}semble (principalement) fonctionner sur les appareils iOS plus récents, il est possible que l'appareil soit bizarre et se replie à l' {position:relative;}occasion et sans cause ni raison. Habituellement, vider le cache aidera jusqu'à ce que quelque chose se produise et que la bizarrerie se reproduise.
Plus précisément, depuis Apple lui-même Préparation de votre contenu Web pour iPad :
Safari sur iPad et Safari sur iPhone n'ont pas de fenêtres redimensionnables. Dans Safari sur iPhone et iPad, la taille de la fenêtre est définie sur la taille de l'écran (moins les commandes de l'interface utilisateur Safari) et ne peut pas être modifiée par l'utilisateur. Pour se déplacer dans une page Web, l'utilisateur modifie le niveau de zoom et la position de la fenêtre en appuyant deux fois ou en pinçant pour effectuer un zoom avant ou arrière, ou en touchant et en faisant glisser pour faire un panoramique de la page. Lorsqu'un utilisateur modifie le niveau de zoom et la position de la fenêtre, il le fait dans une zone de contenu visible de taille fixe (c'est-à-dire la fenêtre). Cela signifie que les éléments de page Web dont la position est «fixée» par rapport à la fenêtre d'affichage peuvent se retrouver hors de la zone de contenu visible, hors écran.
Ce qui est ironique, les appareils Android ne semblent pas avoir ce problème. En outre, il est tout à fait possible de l'utiliser {position:absolute;}en référence à la balise body et sans aucun problème.
J'ai trouvé la cause profonde de cette bizarrerie; que c'est l'événement de défilement qui ne joue pas bien lorsqu'il est utilisé en conjonction avec la balise HTML ou BODY. Parfois, il n'aime pas déclencher l'événement, ou vous devrez attendre la fin de l'événement de swing de défilement pour recevoir l'événement. Plus précisément, la fenêtre est redessinée à la fin de cet événement et les éléments fixes peuvent être repositionnés ailleurs dans la fenêtre.
Voici donc ce que je fais: ( évitez d'utiliser la fenêtre, et restez avec le 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 substance, cela fera que le BODY aura la taille de la fenêtre et ne pourra pas faire défiler. Le DIV déroulant imbriqué à l'intérieur défilera comme le ferait normalement le CORPS (moins l'effet de swing, donc le défilement s'arrête au toucher.) Le DIV fixe reste fixe sans interférence.
En remarque, une z-indexvaleur élevée sur le DIV fixe est important pour que le DIV défilable semble être derrière. J'ajoute normalement des événements de redimensionnement et de défilement de la fenêtre également pour la compatibilité entre les navigateurs et la résolution alternative de l'écran.
Si tout le reste échoue, le code ci-dessus fonctionnera également avec les DIV fixe et défilable définis sur {position:absolute;}.