How to make fixed top bar or bottom bar?

I saw some site have this top or bottom bar which when we scroll the page, the bar stay fixed.

Tried to do that on my site but infortunately it looks weird and ugly.

Can anyone help me by teaching me how to make one?

Forgot to add example:
Look at this site www.share2many.com, on top of the page.

 

Here is some that will make like a box if thats what you mean....
<script>
function calculateBgX(oElement) {
return document.body.scrollLeft - getOffsetLeft(oElement);
}
function calculateBgY(oElement) {
return document.body.scrollTop - getOffsetTop(oElement);
}

function getOffsetTop(oElement) {
var iResult= oElement.offsetTop;
while (oElement.offsetParent) {
oElement = oElement.offsetParent;
iResult += oElement.offsetTop;
}
return iResult;
}
function getOffsetLeft(oElement) {
var iResult= oElement.offsetLeft;
while (oElement.offsetParent) {
oElement = oElement.offsetParent;
iResult += oElement.offsetLeft;
}
return iResult;
}
</script>
<style>
#fixed {
position: fixed;
position: expression("absolute");
left: 0px;
padding: 0px;
width: 100%;
top: 0px;
height: 89px;
top: expression(eval(document.body.scrollTop));
}
body {
background: url('x.gif');
background-attachment: fixed;
margin:0;
}

html {height:100%}

</style>
<div id="fixed">
<iframe src="http://www.sacredfools.org/top-test.htm" frameborder=0 marginheight=0
marginwidth=0 width=100% height=89px scrolling=no"></iframe>
</div>
<div style="height:89px"></div>

 

Updated the first post.

Thanks HRSeo, but does it have to use iframe?
That would restrict me from using adsense on that location right?

 

You dont have to use iframe and that whole script you can just use the position property to fixed and it will done

 

This is what I'm looking to achieve.
http://demo.oiopublisher.com/?s=4

But without involving iframe.

 

Yep just use position fixed.

So something like:

CSS:

.fixedBar{
width:100%;
height:200px;
background:#000;
position: fixed;
top:0;
left:0;

Code (markup):

html

<div id="fixedBar">content inside bar goes here</div>

Code (markup):

 

This is what I saw using the code given.

#top-line{
width:100%;
height:36px;
background:#EF0E2C url(/images/bg-topline.gif);
position: fixed;
top:0;
left:0;

Code (markup):

.top-line{
width:100%;
height:36px;
background:#EF0E2C url(/images/bg-topline.gif);
position: fixed;
top:0;
left:0;

Code (markup):

How can I fix it?

 

Hi,

Try this:

HTML exactly:

<div class="topLine">
Hi, I'm some Fixed Content at the Top of the Page
</div>

Code (markup):

CSS to go inside your stylesheet for the line exactly:

.topLine{
width:100%;
position:fixed;
top:0;
left:0;
z-index:1;
text-align:center;
}

Code (markup):

Just try that first with the text inside, then when it works you can replace it with your ad code. I can't see no reason why that wouldn't work.

 

Great! Now it works.
What does z-index means actually if I may asked?

rep+

 

It makes the bar stay in front of all of the content on the site.

 

Oh, I thought so. Previous code put the bar behind content and scrolling looks weird. This fixed it.

Many thanks.

 

No problemo, as explained above the z-index is the ordering of the elements on the page.

So if you wanted to position things one above another, you'd give it a higher z-index than the other elements.

 

I understand the idea behind having a fixed bar, but I think using it would put people off. to me it looks kind of like a scam site if you have fixed top and/or bottom bars.

It also forces the viewer to realise you are trying your hardest to make money off the site which takes away their enjoyment and makes them feel as though they are just a money making tool for you.

You should always try your hardest to keep your ads minimal as possible and make them flow with your site ie; they have the same background colour and text colours as the appropriate parts in your site (same link colours as the links in your site and same general font colours) this can also help CTRs as people may think it is a part of your site.