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

要实现如下效果，鼠标滚动后，上方导航栏置顶固定

关键html代码：

1. <div class="header-bottom">
2. <div class="container">
3. <div class="logo">
4. <a href="home"><img src="static/web/images/logo.png" alt="远地资产 " /></a>
5. </div>
6. <div class="top-nav">
7. <span class="menu"> </span>
8. <ul>
9. <li><a href="home" class="scroll" >首页</a></li>
10. <li><a href="about" class="scroll">关于我们</a></li>
11. <li><a href="services" class="scroll">服务领域</a></li>
12. <li><a href="project" class="scroll">业务案例</a></li>
13. <li><a href="references" class="scroll">合作伙伴</a></li>
14. <li><a href="activities" class="scroll">官方活动</a></li>
15. <li><a href="news" class="scroll">新闻资讯</a></li>
16. <li><a href="contact" class="scroll">联系我们</a></li>
17. </ul>
18. </div>
19. <div class="clearfix"> </div>
20. </div>
21. </div>

关键CSS代码：

1. .fixed {
2. position: fixed;
3. top: 0;
4. width: 100%;
5. margin: 0 auto;
6. left: 0;
7. border-bottom: 2px solid #113f6c;
8. z-index: 10000;
9. }

关键jquery代码：

1. <script>
2. $(document).ready(function() {
3. var navOffset=$(".header-bottom").offset().top;
4. $(window).scroll(function(){
5. var scrollPos=$(window).scrollTop();
6. if(scrollPos >=navOffset){
7. $(".header-bottom").addClass("fixed");
8. }else{
9. $(".header-bottom").removeClass("fixed");
10. }
11. });
12. });
13. </script>