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");
}
});
});
