如何用jQuery实现在鼠标滚动后导航栏保持固定

<div class="header-bottom">
<div class="container">
<div class="logo">
<a href="home"><img src="static/web/images/logo.png" alt="远地资产 " /></a>
</div>
<div class="top-nav">
<span class="menu"> </span>
<ul>
<li><a href="home" class="scroll" >首页</a></li>
<li><a href="about" class="scroll">关于我们</a></li>
<li><a href="services" class="scroll">服务领域</a></li>
<li><a href="project" class="scroll">业务案例</a></li>
<li><a href="references" class="scroll">合作伙伴</a></li>
<li><a href="activities" class="scroll">官方活动</a></li>
<li><a href="news" class="scroll">新闻资讯</a></li>
<li><a href="contact" class="scroll">联系我们</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>

</div>

.fixed {
position: fixed;
top: 0;
width: 100%;
margin: 0 auto;
left: 0;
border-bottom: 2px solid #113f6c;
z-index: 10000;
}

<script>
$(document).ready(function() {
var navOffset=$(".header-bottom").offset().top;
$(window).scroll(function(){
var scrollPos=$(window).scrollTop();
if(scrollPos >=navOffset){
$(".header-bottom").addClass("fixed");
}else{
$(".header-bottom").removeClass("fixed");
}
});

});
</script>