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

Comment obtenir une position fixe dans Mobile Safari ?

Susan Sarandon
Libérer: 2024-11-20 18:35:22
original
1022 Les gens l'ont consulté

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';
};
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal