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

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

关键html代码：

<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>

关键CSS代码：

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

关键jquery代码：

<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>