Erstellen einer Website oben Benachrichtigungsleiste im Header dynamisch

Question

Gibt es eine Möglichkeit zum Einfügen einer Benachrichtigungsleiste am oberen Rand einer Webseite (ähnlich wie hier bei Stack Overflow), ohne dass spezielle Code auf der Seite selbst benötigt? Ich suche entweder ein CSS-Styling-Snippet oder, falls nötig, ein Javascript-Beispiel. Es benötigt keine speziellen Animationen oder gar eine enge Verbindung, aber es muss sich am oberen Rand der Seite Platz verschaffen.

EDIT: Lesen Sie den letzten Teil: aber es braucht Raum für sich selbst von der Seite an der Spitze zu machen. Ich weiß, wie man ein Element oben auf einer Seite positioniert und wie es im Fenster bleibt, aber was ist eine zuverlässige Möglichkeit, den Rest der Seite nach unten zu verschieben, vorzugsweise ohne JavaScript zu verwenden ?

Answer 1

eine CSS festen Position Mit

#bar 
{ 
    position: fixed; 
    top:0px;left:0px;width:100%; 
    display:none; 
} 

es mit Javascript

sichtbar machen, wenn Sie Platz an der Spitze der Seite standardmäßig möchten, verwenden Sie

visibility: hidden; 

statt

display:none; 

übrigens funktioniert es nicht in IE6

Answer 2

Sie könnten Überlauf: auf dem Körperelement versteckt und dann verlassen auf absolute Positionierung für IE6 neben der Position: für moderne Browser behoben. Müsste vielleicht mit dem Prozent (99/100%) basteln.

Answer 3

Sie könnten es mit ein bisschen Javascript tun.

Um zu garantieren, dass es sich nicht überschneidet, wäre ein wenig kompliziert.

Dies wird in den meisten Fällen tun:

var myElm = document.createElement('div'); 
myElm.appendChild(document.createTextNode('This is a test')); 
document.body.insertBefore(myElm, document.body.firstChild); 

Dies würde scheitern, wenn position: absolute auf der Seite verwendet wurde.

Sie könnten dies so umgehen; von irgendetwas im Körper in einem Kindknoten bewegt:

var myElm = document.createElement('div'); 
myElm.appendChild(document.createTextNode('This is a test')); 

var container = document.createElement('div'); 
container.style.position = absolute; 
container.style.left = '0px'; 

while (document.body.firstChild) 
    container.appendChild(document.body.firstChild); 

document.body.appendChild(myElm); 
document.body.appendChild(container); 
container.style.top = myElm.offsetHeight + 'px'; 

Answer 4

... und Sie können immer jquery verwenden es fadeIn oder fadeOut zu machen.

Beispiel:.

$ ('a') klicken (function() {. $ ('# bar') fadeIn(); });

die Bar müsste "display: none" im css sein, damit die jquery sie einblenden konnte, wann sie wollte. Außerdem sollten Sie eine Zeitüberschreitung festlegen, nach der die Leiste nach einer bestimmten Zeit ausgeblendet wird.

... oder etwas ähnliches ...