Fixing div navigation from hiding upon scroll

Question

I have this sample HTML5 page which have a navigation and a content area pasted on JSFiddle .

The problem is that <div id="nav"> isn't fixed when I scroll vertically. How can I make the navigation to be fixed on the top of the browser even with scrolled vertically?

Answer 1

DEMO

body {
    margin: 0px;
    width: 100%;
    height: 120%;
    background: red;
}
#nav {
    position: fixed;
    width: 100%;
    z-index: 99;
    height: 25px;
    background: blue;
}

Answer 2

Use position:fixed and z-index property (the issue you had was due to the layers : your fixed div was under #area div) :

#nav{
   position:fixed;
   top:0;
   width:100%;
   height: 25px;
   z-index:50;
   background: blue;
}

Example

Answer 3

Create another hidden navigation (same with already used nav), and show it when user scrolls down enough.

Here is a good tutorial to do that.

And here is some edited and working example from my website.