webentwicklung-frage-antwort-db.com.de

Feste HTML-Kopfleiste beim Scrollen

Ich habe hier ein Beispiel geschrieben 

http://jsfiddle.net/R9Lds/

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

6
Eric Tseng

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

9
Dimas Pante

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

http://jsfiddle.net/R9Lds/1/

2
Edward