Feste HTML-Kopfleiste beim Scrollen
Ich habe hier ein Beispiel geschrieben
Ich möchte eine Kopfzeile oben auf der Seite.
<p style="vertical-align: middle; color: white">Head Bar</p>
Und wenn der Benutzer nach oben und unten blättert, befindet sich die Kopfleiste immer oben.
Jetzt hat es jedoch ein Problem, dass der untere Teil der Seite abgeschnitten wird.
Genau wie im obigen Beispiel
"Titel 3"
"Inhalt 3."
"Autor: Alex"
wird abgeschnitten.
Hat jemand eine Idee zu diesem Thema?
Danke im Voraus.
Eric
Sie können es tatsächlich einfacher als das erreichen. Sie müssen nur das Header-div mit position: fixed und einem "Push" -Div festlegen, also ... Drücken Sie den Inhalt nach unten.
Werfen Sie einen Blick in diese Fiddle
Sie sollten stattdessen die Kopfzeile auf position: fixed setzen.
Beispiel:
div.header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
wenn Sie besorgt sind, dass die Oberseite von .home abgeschnitten wird, können Sie auch eine Randspitze hinzufügen