http://codepen.io/azizarslan/pen/oiuCg

HTML:




CSS:

html, body {
width: 100%;
height: 2000px;
margin: 0;
padding: 0;
}

nav {
width: 754px;
height: 60px;
position: absolute;
left: 50%;
top: 80px;
margin-left: -377px;
}

nav.top {
position: fixed;
top: 0;
left: 50%;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav ul li {
width: 150px;
height: 60px;
float: left;
border-left: 1px solid #000;
}

nav ul li:first-child {
border-left: 0;
}

nav ul li a {
width: inherit;
height: inherit;
display: block;
background: #222;
font: 20px/60px Arial;
color: #fff;
text-decoration: none;
text-align: center;
}

nav ul li a:hover {
background: #111;
}


JS:

/**
* Aziz Arslan
* twitter.com/azizarsl
**/

var jDocument = $(document);

jDocument.ready(function() {
jDocument.scroll(function() {
var documentScrollHeight = jDocument.scrollTop();

if(documentScrollHeight > 50) {
$("nav").addClass("top");
} else {
$("nav").removeClass("top");
}
});
});