Positionnement fixe dans Mobile Safari : un guide complet

Obtenir un positionnement fixe pour un élément par rapport à la fenêtre d'affichage dans Mobile Safari peut être difficile. Malgré l'opinion répandue selon laquelle "position : fixe" ne fonctionne pas dans Mobile Safari, Gmail a introduit une solution innovante qui offre une approximation proche du véritable positionnement fixe.

Une approche pour résoudre ce problème consiste à exploiter JavaScript pour détecter les événements de défilement en temps réel. Cela vous permet d'ajuster dynamiquement la position d'un élément lors du défilement de la page.

Pour obtenir un div à position fixe qui défile vers le bas de la page, vous pouvez implémenter un simple script JavaScript :

window.onscroll = function() {
  var fixedDiv = document.getElementById('fixedDiv');
  fixedDiv.style.top = (window.pageYOffset   window.innerHeight - 25)   'px';
};

En ajustant la propriété "top" de l'élément "fixedDiv" en fonction du décalage et de la hauteur de la page, le div conservera sa position en bas de la fenêtre pendant que l'utilisateur fait défiler. Le réglage « 25 » garantit que le div est légèrement décalé par rapport au bas de l'écran pour une visualisation optimale.