PDA

View Full Version : Notification bar on the top of the browser



cinux
26 Feb 2010, 03:27 PM
Hi All,

This is my first question in this forum. hope you would help me in this issue.

I would like to have a notification bar on the top of the home page.
When user scrolls down he should able still view the notification bar on the top.

For example please look at this website:

http://stackoverflow.com/questions/1416423/hidden-features-of-spring-framework

There is an orange coloured bar on the top of the page: FAQ

please can any one help me on this issue ?

Appreciate if any onr gives me a working sample :)


Thanks in advance

kryptobs2000
01 Mar 2010, 10:55 AM
Use something like this. The main thing you are looking at is the position: fixed attribute. This keeps the position of the container fixed relative to the browser window itself, so since (in my html not posted) the header <div> is the first one displayed it is at the top of the page, and thus it will remain there even when scrolled. The container id below it was only created so that you can apply it to another <div> below it creating a scroll bar to see it work. So what this does is display an image (thumbs.gif) across the top of the page at all times.


#header {
height: 20px;
width: 100%;
background: url(thumbsup.gif) top left;
position: fixed;
}

#container {
height: 1300px;
width: 100%;
}