Header 區的 HTML 設計

  <section id="sec1">
   
    <header>
     
      <div>
        <img id="logo" src="images/logo.png" alt="">
      </div>
      
      <nav>
        <a href="#sec1">首頁</a><a href="#sec2">服務</a><a href="#sec3">學習</a><a href="#sec4">展示</a><a href="#sec5">聯絡</a>
      </nav>
      
    </header>
    
  </section>

Header 區的 CSS 樣式設計

/* #sec1  ===================================================================== */
header { text-align: center; z-index: 9999; }
header>div { background-color: #272A32; }

nav a { display: inline-block; width: 200px; height: 60px; padding-top: 10px;
  background-image: url(images/btn.png); 
  font-family: 'Orbitron', 'cwTeXYen', sans-serif; font-size: 1.5rem; color: #fff;
}
        
header.fixed { position: fixed; width: 100%; left: 0; top: 0; animation: headerAni 0.8s; }

@keyframes headerAni{
  0% { transform: translateY(-150px); }
  100% { transform: translateY(0px); }
}

加上程式讓 Header 區滑出方畫面後再滑入固定在上方

先載入 jQuery 函式庫的 JS 檔案

  <script src="路徑/jquery-3.3.1.min.js"></script>
</head>

加上程式讓 Header 區滑出方畫面後再滑入固定在上方

  <script>
   
    $(document).ready(function(){
     
      var targetTop;      //負責隨時偵測取得上方的距離
      var scrollTime;     //負責視窗捲動時偵測等待的時間
    
      //判斷往上捲出的高度是否已超過header的高度, 如果header已捲出畫面則加上fixed的class名稱
      function checkHeader(){
        if( $(document).scrollTop() >= $('header').height() ){
          $('header').addClass('fixed');
        }
        if( $(document).scrollTop() == 0 ){
          $('header').removeClass('fixed');
        }
      }
      checkHeader();

      //當視窗捲動時==============================================================================
      $(window).scroll(function(){
        clearTimeout(scrollTime);
        scrollTime = setTimeout(function(){ checkHeader(); },100);
      });

      //當導覽列中的按鈕被點擊時, 讓整頁滑動到對應的區段中=========================================
      $('nav a').click(function(){
        targetTop = $($(this).attr('href')).position().top; //console.log(targetTop);
        //控制整頁滑動
        $('html,body').animate({scrollTop:targetTop},500);

        if($('.showMenu').is(':visible')){ $('.showMenu').trigger('click'); }
      });
       
    });
        
  </script>