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,

Answer 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