如何用jQuery實現在滑鼠滾動後導航欄保持固定
阿新 • • 發佈:2019-01-30
要實現如下效果,滑鼠滾動後,上方導航欄置頂固定
關鍵html程式碼:
關鍵CSS程式碼:<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;
}
關鍵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