<style>
.menu{
background:#ccc;
left:0;
width:100%;
float:left;
margin:0 auto;
margin-top:300px;
border-bottom:3px solid #aaa;
}
.li {
cursor:pointer;
list-style: none;
float: left;
font: 14px arial;
padding: 20px;
}
.li:hover{
background:#bbb;
}
.fixed{
position:fixed;
margin-top:0;
}
</style>
<div class="menu"><div class="li">HOME</div><div class="li">HOME</div><div class="li">HOME</div><div class="li">HOME</div></ul></div>
<script>
var topm=$(".menu").offset().top;
$(window).scroll(function(){
if ($(window).scrollTop()>=topm){
$(".menu").addClass("fixed");
}else{
$(".menu").removeClass("fixed");
}
});
</script>