要實現如下效果，滑鼠滾動後，上方導航欄置頂固定

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