suchen

Heim >Web-Frontend >H5-Tutorial >3 Möglichkeiten, das Problem zu lösen, dass die schwebende Ebene (schwebende Kopf- und Fußzeile) den Inhalt auf dem mobilen Endgerät blockiert_html5-Tutorial-Fähigkeiten

3 Möglichkeiten, das Problem zu lösen, dass die schwebende Ebene (schwebende Kopf- und Fußzeile) den Inhalt auf dem mobilen Endgerät blockiert_html5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:535227Durchsuche

Auf den heutigen Frontend-Seiten, insbesondere auf mobilen Geräten, ist es oft notwendig, die -Module auszusetzen und sie nach dem Verschieben der Seite am oberen oder unteren Rand der Seite zu belassen , wie folgt Wie in der Abbildung gezeigt.

Das Modul „Antwortthema“ folgt dem Floating der Seite und wird immer am Ende der Seite angezeigt. Die Codestruktur ist wie folgt.


Code kopieren
Der Code lautet wie folgt:

...

Antwortthema


...

Um eine solche Funktion zu erreichen, müssen Sie natürlich position:fixed verwenden. Es gibt jedoch einen Fehler bei der Verwendung von „position:“ als Beispiel. (Dasselbe gilt für den schwebenden

.) Normaler Dokumentenfluss aufgrund der festen Positionierung, was dazu führt, dass einige Inhalte verdeckt werden. Wie unten gezeigt:

Die linke Seite oben ist die problematische Anzeige und die rechte Seite ist die normale Anzeige. Wie kann man dieses Problem lösen? Hier möchte ich drei meiner Meinungen darlegen, in der Hoffnung, einen besseren Weg zu finden.

Methode 1. Javascript-Lösung

Verwenden Sie js, um das Problem zu lösen. Wenn der Schieberegler an den unteren Rand des Seiteninhalts gleitet, ändern Sie die feste Positionierung, die ursprünglich vom Dokumentfluss abweicht, in die relative Positionierung, die nicht vom Dokumentfluss abweicht.

Die Verwendung von Skripten zur Lösung von Problemen ist die mühsamste Methode. Versuchen Sie, keine Skripte zu verwenden, wenn sie mit CSS gelöst werden können, aber es ist immer noch eine Methode.

Code kopieren
Der Code lautet wie folgt:

//Bildlaufleiste auf der Scrollabstand der Y-Achse
function getScrollTop(){
return document.body.scrollTop;
}
//Die Gesamthöhe des Dokuments
function getScrollHeight(){

Return document.body.clientHeight;
}
//Höhe des Browser-Ansichtsfensters
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
　{
　windowHeight = document.documentElement.clientHeight;
　}
else
{
🎜 > Return windowHeight;
}

//Schiebeüberwachung
window.onscroll = function(){
//Beim Schieben nach unten wird die Fußzeile nach unten gesetzt, vorausgesetzt, dass die Höhe von

60 beträgt 🎜> if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer' ).css('position','relative');
}



Methode 2. Fügen Sie dem Körper einen Polsterboden hinzu

Fügen Sie dem html-Tag ein padding-bottom-Attribut hinzu, sodass der Inhalt des normalen Dokumentflusses einen durch padding-bottom festgelegten Abstand vom unteren Rand des Textkörpers hat.

Der Nachteil besteht darin, dass angesichts der Wiederverwendung von Modulen und der häufigen Notwendigkeit, CSS-Dateien nach dem Start des Projekts zusammenzuführen, Seiten belastet werden, die keine feste Positionierung in der erfordern, wenn andere Seiten diesen schwebenden Block nicht benötigen , was nicht empfohlen wird.



Code kopieren
Der Code lautet wie folgt:
//Nehmen Sie die Höhe von an
ist 60px
body
{
padding-bottom: 60px




Methode 3. Geschwister-Platzhalter
hinzufügen

Ich persönlich halte diese Methode für die praktischste. Wickeln Sie eine div-Ebene außerhalb des