課程目的:

這次的內容是當我們滾輪往下滑時，停到導覽列的高度時導覽列會維持在網頁的最頂端
作品實做

本次功能實作重點：

• 選取DOM元素
• 監聽滑動到nav的高度時，nav維持在最頂端，並滑出Lost區塊
• 當畫面尺寸出現變化時重新取Header的新高度

選取DOM元素

 let nav = document.querySelector("#main"); //選取nav列
 let header = document.querySelector("header"); //選取header

監聽滑動到nav的高度時，nav維持在最頂端，並滑出Lost區塊

//撰寫的CSS
.nav-fixed #main {
  position: fixed;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.nav-fixed #main .logo {
  max-width: 100%;
}

      let headerOffsetHeight = header.offsetHeight;//取得header的高度

      function scrollHandler(e) {
      //當螢幕滾動超過header的高度時在body添加"nav-fixed"
        if (window.scrollY >= headerOffsetHeight) {
          document.body.classList.add("nav-fixed");
          document.body.style.paddingTop = nav.offsetHeight + "px"; 
          //因為position: fixed的原因我們原本nav的高度會縮減，所以需要將被吃掉的高補回來
        } else {
         //如果小於等於header高度則清除樣式
          document.body.classList.remove("nav-fixed");
          document.body.style.paddingTop = ""; //清除樣式
        }
      }
      
      window.addEventListener("scroll", scrollHandler); //監聽螢幕滾度
      

position: fixed; 是一種定位屬性，用來將元素相對於瀏覽器窗口進行定位，不會受父素的影響，預設位置為視窗左上角

document.body.style.paddingTop = ""; 當我們設定””時代表，在CSS已經完全刪掉了此屬性，

這和我們設定為0的時候不一樣，設定為０的狀態在CSS樣式裡面還會保留此屬性

//當我們設定為""
document.body.style.paddingTop = "";
//這是CSS
body {
}
================================

//當我們設定為0
document.body.style.paddingTop = 0;

//這是CSS
body {
  padding-top: 0 
}

當畫面尺寸出現變化時重新取Header的新高度

    
    function rePosition() {
        headerOffsetHeight = header.offsetHeight; //重新賦值header的高
      }
      
     window.addEventListener("resize", rePosition); //假設Header因為變版高度改變時

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 24：Sticky Nav
JS30