html
<div class="section s0">
<nav class="nav">
<ul>
<li><a href="#"><span>네비게이션1</span></a></li>
<li><a href="#"><span>네비게이션2</span></a></li>
<li><a href="#"><span>네비게이션3</span></a></li>
<li><a href="#"><span>네비게이션4</span></a></li>
<li><a href="#"><span>네비게이션5</span></a></li>
</ul>
</nav>
-- 내용 --
</div>
css
.s0{
background:lightblue;
padding-top:30px;
}
.nav{
width:80%;
min-width:1000px;
height:70px;
background:#666666;
margin:0 auto;
position:static;
z-index:999999;
left:10%;
top:-100px;
}
js
$(window).scroll(function(){
var st=$(window).scrollTop();
if(st>150){
$(".s0").css({
"padding-top":0
});
$(".nav").css({
position:"fixed",
width:"100%",
left:0,
transition:"0.5s"
});
$(".nav").stop().animate({
top:0,
});
}else{
$(".s0").css({
"padding-top":30
});
$(".nav").css({
position:"static",
width:"80%",
left:"10%",
transition:"0.5s"
});
$(".nav").stop().animate({
top:-100,
});
}
});