jquery menu bar floating top

Question

I'm trying to make a menu bar float constantly at the top of the browser, so when they scroll down the page the menu bar remains at the top.

How could I go about doing this?

Regards,

Solution 1

You can do this using the CSS position property. For example:

#menu {
  height: 50px;
  left: 0;
  position:fixed;
  top: 0;
}

References:

• http://www.w3schools.com/cssref/pr_class_position.asp
• http://www.quirksmode.org/css/position.html

The first place I noticed this used effectively is on the Perldoc site. If you have to scroll, the #content_header element uses a combination of CSS and JS to keep the element visible on the page.

• http://perldoc.perl.org/index.html

Solution 2

The CSS tag position: fixed; will make it stay in the same position on the screen, even if scrolling. Use that and then position it with top/right/bottom/left as shown below. z-index will affect how high it is 'stacked'. That is, an element with a z-index of 1 will be beneath an element of a z-index of 100.

div.float {
    position: fixed;
    top: 10px;
    left: 25px;
    z-index: 9001;
}

jsfiddle.net was down earlier, but it's back up. Here's an example of a floating menu that is static until you scroll to a certain point: http://jsfiddle.net/2rhrc/