如何用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;
    width: 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>