Creating a site top bar in header dynamically

Question

Is there a way to insert a bar at the top of any webpage (similar to the ones here at Stack Overflow) without needing any special code in the page itself? I'm looking for either a snippet of CSS styling or, if necessary, a Javascript example. It doesn't need any special animations or even a close link, but it does need to make room for itself at the top of the page.

EDIT: Read the last part: but it does need to make room for itself at the top of the page. I know how to position an element on the top of a page and also how to make it stay in the window, but what is a reliable way to move the rest of the page down to accommodate it, preferably without needing to use Javascript?

Answer 1

Using a CSS fixed position

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

make it visible with javascript

if you want room at the top of the page by default, use

visibility: hidden;

instead of

display:none;

by the way, it'll not work in IE6<

Answer 2

You could set overflow:hidden on the body element and then rely on absolute positioning for IE6 in addition to position:fixed for modern browsers. Might need to tinker around with the percent ( 99/100% ).

Answer 3

You could do it with a bit of javascript.

To guarantee it won't overlap anything would be a little complicated.

This will do for most cases:

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

This would fail if position: absolute was used on the page.

You could get around this like this; by moving anything in the body into a child node:

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

...and you can always use jquery to make it fadeIn or fadeOut.

example:

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

the bar would have to be "display:none" in the css so the jquery could fade it in when it wanted to. Also, you'd want to set a timeout for the bar to fade Out after a certain amount of time.

...or something similar...