Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So erreichen Sie eine feste Positionierung in Mobile Safari: Eine umfassende Anleitung

DDD
Freigeben: 2024-11-20 02:52:02
Original
478 Leute haben es durchsucht

How to Achieve Fixed Positioning in Mobile Safari: A Comprehensive Guide

Feste Positionierung in Mobile Safari: Ein umfassender Leitfaden

Eine feste Positionierung für ein Element relativ zum Ansichtsfenster in Mobile Safari zu erreichen, kann eine Herausforderung sein. Trotz der weit verbreiteten Meinung, dass „Position: fest“ in Mobile Safari nicht funktioniert, hat Gmail eine innovative Lösung eingeführt, die eine echte Annäherung an die tatsächliche feste Positionierung bietet.

Ein Ansatz zur Lösung dieses Problems besteht darin, JavaScript zu nutzen Erkennen Sie Scroll-Ereignisse in Echtzeit. Dadurch können Sie die Position eines Elements beim Scrollen der Seite dynamisch anpassen.

Um ein Div mit fester Position zu erreichen, das zum Ende der Seite scrollt, können Sie ein einfaches JavaScript-Skript implementieren:

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

Durch Anpassen der „top“-Eigenschaft des „fixedDiv“-Elements basierend auf dem Versatz und der Höhe der Seite behält das Div seine Position am unteren Rand des Ansichtsfensters bei, während der Benutzer scrollt. Die „25“-Einstellung stellt sicher, dass das Div für eine optimale Anzeige leicht vom unteren Bildschirmrand versetzt ist.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine feste Positionierung in Mobile Safari: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage