CODEWITHSUNDEEP
csshtml
David B
David B

Reputation: 3581

Fixing div navigation from hiding upon scroll

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?

Upvotes: 0

Views: 52

Answers (3)

mht
mht

Reputation: 80

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.

Upvotes: 0

MIZ
MIZ

Reputation: 385

DEMO

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

Upvotes: 1

potashin
potashin

Reputation: 44581

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

Upvotes: 0

Related Questions