How To Create A Floating Top Bar in Javascript - Tutorial
By xdee_design
Floating Top Bar in Javascript
What we are going to do:
Hi, today we want to create a nice floating top bar in javascript as seen on many sites on the internet. It can be useful to display messages or ads.
First of all, some CSS:
Add this to the <head> section of your HTML document:
<style type="text/css">
#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;
}
</style>
We need to set the style options for the top bar first. There isn't anything special except the following options:
width:100% This will make the top bar covering the whole width of the site. position:absolute We need this to make sure that the top bar doesnt "care" about the positions of the other elements.
z-index:2 This will make that our top bar stays always on top.
Now, our Javascript:
Put this into the <head> section of the HTML document:
<script type="text/javascript">
function placeIt() {
if (!document.all) {
document.getElementById("top_bar").style.top = window.pageYOffset +"px"; // For Mozilla etc.
} else {
document.getElementById("top_bar").style.top = document.documentElement.scrollTop +"px"; // For the IE...
}
window.setTimeout("placeIt()", 100);
}
</script>
The whole script's located in a function called "placeIt". This is necessary, for calling the function over and over again to make sure our top bar is "floating".
Then we have do some seperation between the Internet Explorer and the other browsers:
if (!document.all) { If the script's running in IE then document.all is = true, if it's running in other browsers it's = false.
document.getElementById("top_bar").style.top this is the reference to the style option of our div element which we'll create later. The "top" stands for the distance from the top of the document and the bar.
window.pageYOffset and document.documentElement.scrollTop with these two codes we'll get the amount of pixels the user scrolled down in the document.
All we have to do next is to add the "px" because it's necessary in CSS... Now we can call our function over and over again with the following line of code: window.setTimeout("placeIt()", 100) It will now call the function every 100 milliseconds.
Last but not least, the HTML:
<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>
This should be quite easy to understand. We call our function after the documents fully loaded: <body onload="placeIt()">
Then we have the text for the top bar and a link to close it. To close the top bar we call the following javascript code when the user clicks on the link:
document.getElementById('top_bar').style.display ='none'
Well, open your browser and test the whole thing. If you've got some performance problems try to change the amount of milliseconds above.
This was my first tutorial on here and I hope you enjoyed it! If you have any questions please post them in the comments. Thanks for reading, Michael
Comments
Thank you very much. I found this after searching for the simple way, not 1000 lines of proprietary script. This tells me the basics, which was all I needed.
Wow, i had look another solution for this, but your solution is very simple.
Thank u very much
Any idea how I can show a webpage in the bottom instead of a picture?
yeah
Thank you very much, I used your code as a base to create a bottom bar.
Hello,
Thanks about your writing. This article translated into persian (farsi) in our website.
Thank you
thanks very much
Hamza 2 years ago
Thanks very much.