How or what is it called to have a navigation bar type thing at the top of the page that scrolls down as you scroll so the navigation bar doesn't move.

is it possible to do it in HTML and what is the code?

Tags: html, web

▶ Reply to This

Replies to This Discussion

Permalink Reply by Aaron Vail on February 25, 2010 at 6:10pm

Here is a tutorial I found helpful.. http://www.jtricks.com/javascript/navigation/floating.html Hope this helps!

▶ Reply

Permalink Reply by DigitalMan on February 25, 2010 at 6:11pm

That's not HTML that's JavaScript. :)

▶ Reply

Permalink Reply by Joel on February 25, 2010 at 7:04pm

Do something like:

<div style="width: 200px; position: fixed; top: 50; left: 50; height: 80px;">
Content
</div>

The position attribute is the main thing that makes it work. You can probably do this with any element that supports the position attribute. If you want the bar to be on the bottom you likely need to use JavaScript to resize it. You probably want to change the width to 100% and change the left attribute to 0 for a bar.

▶ Reply

Permalink Reply by Kevin on February 25, 2010 at 8:52pm

thank you. thats what i was looking for

▶ Reply

Permalink Reply by Justen on February 25, 2010 at 8:39pm

position:fixed will get the job done, but it doesn't work in IE6, so keep that in mind if it matters. It's the same as position:absolute, except it moves with the screen.

▶ Reply

Permalink Reply by _mark on February 26, 2010 at 12:44am

There's different methods, you can use css3 too.

▶ Reply

Permalink Reply by Adam Lynch on February 27, 2010 at 4:52pm

CSS2 does it fine

▶ Reply

Permalink Reply by Connor Bryant on February 26, 2010 at 12:45pm

Im guessing its probably javascript.

▶ Reply

Permalink Reply by Adam Lynch on February 27, 2010 at 4:51pm

Ok, first make sure you have a unique id on the navigation bar, then either in your CSS file or style element in your html, whichever you prefer, type:
#nav_bar
{
position: fixed;
top: 0%;
left:0%;
}

"fixed" just means it stays on screen where you placed it no matter where you scroll. like facebook chat
top & left are there to tell where its actually positioned. they are relative; so top:0; means that it'll be at the very very top of the page... if you had said top:10px; it would be 10 pixels down from the top of the window... but if your placing it somewhere use percentages (or "em"s) instead of "px" (e.g. top: 15%;)
you do not have to say top & left... you can use "top", "left", "bottom", and "right"... so if you wanted to get it at the bottom of the window all the time you'd just say "bottom:0;"
does that help?