Floating Top Bar – Javascript Tutorial
Posted on 27. Jun, 2009 by admin in CSS/HTML Tutorials
Hier nun wieder einmal ein Javascript Tutorial. Eine beliebte Methode um Werbung, Warnungen oder Meldungen auf einer Website darzustellen sind sogenannte “Floating Top Bars“. Sie befinden sich oberhalb der Website und “fliessen” sozusagen mit, das heisst wenn der User nach unten scrollt, bewegt sich auch die Top Bar mit nach unten.
In diesem Tutorial will ich euch zeigen wie ihr mit relativ wenig Code schnell und einfach eure eigenen Floating Top Bar erstellen könnt und so dem User wichtige Meldungen anzeigen oder einfach einen guten Tag wünschen könnt.
Lernziele:
- CSS Elemente absolut ausrichten
- Javascript Funktionen in einem Intervall aufrufen
- Browserweiche
Voraussetzungen:
- Basis CSS & HTML Kenntnisse
Erstellt ein neues HTML Dokument und fügt dann folgenden CSS Code in den <head> Bereich ein:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | #top_bar { position: absolute; top: 0px; left: 0px; width: 100%; height: 30px; background: #ffffe1; border-bottom: 1px solid black; float: left; z-index:2; font-size: 12px; font-weight: normal; display: inline; font-family: Arial, Verdana, sans-serif; text-align: left; color: black; } #top_bar:hover { background: #004ba8; color: white; } #top_bar p.infotext { float: left; padding-left: 20px; padding-right: 20px; margin-left: 15px; margin-top: 7px; } #top_bar a.close { font-size: 14px; font-weight: bold; text-align: right; margin-top: 7px; margin-right: 15px; float: right; color: silver; text-decoration: none; } #top_bar a.close:hover { margin-top: 8px;color: white; } |
Eigentlich sollte das alles recht verständlich sein.Wichtig sind dabei “width:100%“, “position:absolute” und “z-index:2“.
Mit der width Angabe bewirken wir, dass die Top Bar immer die volle verfügbare Breite ausfüllt. Natürlich kann dieser Wert auch geändert werden, doch aus ästhetischen Gründen würde ich das nicht empfehlen. Die Position wird auf “absolute” gesetzt, das heisst dass sich die Top Bar immer absolut zu den anderen Elementen verhält, also sich immer an der selben Position befindet, egal wie gross der restliche Inhalt ist. Schlussendlich brauchen wir noch den z-index. Mit ihm legen wir fest, dass sich die Top Bar über dem Inhalt befinden soll.
Nun kommt unser Javascript:
1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"><!-- function placeIt() { if (!document.all) { document.getElementById("top_bar").style.top = window.pageYOffset +"px"; // Für Mozilla etc. } else { document.getElementById("top_bar").style.top = document.documentElement.scrollTop +"px"; // Für den IE... } window.setTimeout("placeIt()", 1); } // --></script> |
Eigentlich vergleichsweise kurz, nicht? Nun die Erklärung dazu:
Die Funktion um unsere Top Bar zu platzieren nennen wir “placeIt”. Zuerst brauchen wir eine sogenannte Browserweiche. Da der Internet Explorer bekanntlich oft rumzickt und sich nicht an die Standarts hält, müssen wir eine kleine Unterscheidung durchführen:
if (!document.all) {: Wenn document.all = false ist, wird das Script nicht im Internet Explorer ausgeführt.
Nun aber zum eigentlichen Teil:
Mit “document.getElementById(“top_bar”).style.top” greifen wir auf die Style Eigenschaft unseres Top Bar Div Containers zu. Das “top” bedeutet, dass wir hiermit die Position oberhalb angeben können. Eigentlich könnten wir den Wert einfach auf 0 setzen, dies würde schon reichen, wenn wir da nicht das kleine Problem hätten, dass sich die Top Bar ja mitbewegen soll, wenn der User scrollt.
Die Anzahl Pixel die der User nach unten gescrollt hat lässt sich mit “window.pageYOffset” und mit “document.documentElement.scrollTop” (im IE) ermitteln. So bewirken wir, dass sich unsere Top Bar mitbewegt.
Aber halt, etwas fehlt doch noch! Damit unsere Funktion immer wieder aufgerufen wird, müssen wir noch folgendes hinzufügen:
window.setTimeout(“placeIt()”, 1) Dies bewirkt einfach, dass die Funktion immer und immer wieder aufgerufen wird. Die Zahl 1 steht dabei für die Anzahl Millisekunden die zwischen den Aufrufen vergehen sollen. Falls Peformance oder sonstige Probleme auftreten sollte man diesen Wert einfach etwas erhöhen…
Nun noch unser HTML Code:
1 2 3 4 5 6 7 8 | <body onload="placeIt()"> <div id="top_bar"> <p class="infotext"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </p> <a class="close" href="#" onclick="document.getElementById('top_bar').style.display ='none'">Schliessen</a> </div> <img src="http://xdee.net/wp-content/uploads/2009/02/lonesome-day-1280x1024.jpg" /> </body> |
Als Beispiel lade ich hier einfach ein Bild, welches ich einmal erstellt habe.
Wichtig sind hier zwei Dinge:
- Unsere Funktion wird dann zum ersten Mal aufgerufen, wenn das Dokument fertig geladen ist mit “<body onload=”placeIt()”>”.
- Der User sollte die Möglichkeit haben die Top Bar zu schliessen, dies bewirken wir indem wir einen Link platzieren und folgenden Code hinzufügen: onclick=”document.getElementById(‘top_bar’).style.display =’none’” Damit verstecken wir die Top Bar wieder.
Testet nun das Script und experimentiert wie immer ein bisschen damit rum.
Fragen und Kritik einfach in die Comments.
MFG
Michael
mohammad
Jun 29th, 2009
good site
tnx
Paul
Dez 27th, 2009
Also wenn ich mir das Beispiel anschaue: wo floated da was?
Außerdem laden die Seiten ewig.