Création dynamique d'une barre de notification dans l'en-tête

Question

Est-il possible d'insérer une barre de notification en haut de n'importe quelle page Web (similaire à celle de Stack Overflow) sans avoir besoin de code spécial dans la page? Je cherche un extrait de style CSS ou, si nécessaire, un exemple Javascript. Il n'a pas besoin d'animations spéciales ou même d'un lien étroit, mais il a besoin de se faire une place en haut de la page.

EDIT: Lire la dernière partie: mais il faut faire de la place pour lui-même en haut de la page. Je sais comment placer un élément en haut d'une page et aussi comment le faire rester dans la fenêtre, mais quelle est une manière fiable de déplacer le reste de la page pour l'adapter, de préférence sans Javascript ?

Answer 1

En utilisant une position fixe CSS

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

rendre visible avec le javascript

si vous voulez chambre en haut de la page par défaut, utilisez

visibility: hidden; 

au lieu de

display:none; 

À propos, ça ne marchera pas dans IE6

Answer 2

Vous pouvez définir un débordement: caché sur l'élément de corps et ensuite compter sur le positionnement absolu pour IE6 en plus de la position: fixe pour les navigateurs modernes. Peut-être besoin de bricoler avec le pourcentage (99/100%).

Answer 3

Vous pouvez le faire avec un peu de javascript.

Pour garantir qu'il ne se chevauchera pas quelque chose serait un peu compliqué.

Cela fera pour la plupart des cas:

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

Ce serait un échec si position: absolute a été utilisé sur la page.

Vous pourriez contourner ceci comme ceci; en déplaçant quoi que ce soit dans le corps dans un nœud enfant:

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

... et vous pouvez toujours utiliser jquery pour le rendre fadeIn ou fadeOut.

exemple:.

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

la barre devrait être "display: none" dans le css afin que le jquery puisse le faire disparaître quand il le voulait. En outre, vous souhaitez définir un délai d'attente pour que la barre disparaisse après un certain laps de temps.

... ou quelque chose de similaire ...