css - How fixed a navigation to the center on scroll? -

i have navigation centered width of 80% , when scroll page, @ point of time fixed header top, when floats left instead of staying in middle. how can keep navigation center , fixed top.

html

<div id="foo"> </div> <div id="nav"> </div> <div id="bar"> </div> 

css

#foo{     height:100px;     width:100%; } #bar{     height:1000px;     width:100%; }  #nav{     width: 80%;     height: 100px;     margin: 0 auto;     background-color: #ffcc00; } .fixed-nav{     position: fixed;     top: 0; } 

script

var bottom = $('#nav').offset().top; $(window).scroll(function(){         if ($(this).scrolltop() > bottom){          $('#nav').addclass('fixed-nav');      }     else{         $('#nav').removeclass('fixed-nav');     } }); 

here code in jsfiddle

you need center nav in way. if have set fixed width (80% in case), can use margin-left: 10%; instead margin: 0 auto;.

demo

note: set body{ margin: 0; } work properly.