1. 程式人生 > >如何用jQuery實現在滑鼠滾動後導航欄保持固定

如何用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>

具體效果可參照我製作的網站:http://www.shydzc.com