Maison >interface Web >tutoriel CSS >Comment obtenir une position fixe dans Mobile Safari ?

Comment obtenir une position fixe dans Mobile Safari ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-20 18:35:22996parcourir

How to Achieve a Fixed Position in Mobile Safari?

Fixation des positions dans Mobile Safari

Positionner un élément fixe par rapport à la fenêtre dans Mobile Safari est un défi de longue date. La méthode traditionnelle d'utilisation de position : fixe échoue souvent dans ce navigateur.

Solution alternative

Gmail a récemment introduit une solution innovante qui offre une approximation d'une position fixe. L'astuce consiste à ajuster dynamiquement la position supérieure de l'élément lors du défilement.

Implémentation de JavaScript

Cette méthode alternative peut être implémentée avec seulement quelques lignes de JavaScript :

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

Dans ce code, l'écouteur d'événement onscroll met à jour la propriété CSS supérieure de l'élément avec l'id="fixedDiv". La formule utilisée garantit que l'élément est toujours positionné en bas de la fenêtre, avec un petit décalage de 25 pixels.

En ajustant constamment la position de l'élément au défilement, ce code simule efficacement une position fixe qui reste ancrée vers la fenêtre d'affichage dans Mobile Safari.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn