好的Nav bar的動態可以讓網站不那麼呆板，
其實實作的技術也不難，就是偵測頁面的滾動
向下滑的時候再出現

今天實作兩個：

提案	Nav bar的消失	Nav bar的變色
目的	爭取更多展示空間 → 往下滑時消失，往上滑時出現	更好的閱讀體驗，也常常看到縮小版本
JS實作	偵測scrollY位置	使用Intersection Observer
成果圖

一個一個來看看吧～

Nav bar的消失

用JS偵測瀏覽器現在的位置 vs. 剛剛的位置，
Y比較大的話表示往下滑，那就讓Nav bar消失，
反之就出現。

//JS
let lastPos = 0
const nav = document.querySelector('nav');

// 監聽scroll事件
document.addEventListener('scroll',function(){
  let currentPos =  window.scrollY;
  //   往下滑
  if(currentPos > lastPos){
        nav.style.top = "-60px"; //讓nav bar消失
  }else{
    nav.style.top = "0px"; //讓nav bar出現
  }
  lastPos = currentPos;//再記住現在位置，跟未來的位置做比較
});

Nav bar的變色

利用之前提到的Intersection Observer API 傳送門！
來偵測第一個區塊消失了沒，消失的話，就讓Navbar變色。

//選觀察對象, 我們觀察對象是section1
//當section1要消失的時候，就讓Nav bar換色好讓他在section2顏色更顯眼
const nav = document.querySelector('nav');
const section1 = document.querySelector('.section1');

//當section1離開的時候就加上新的樣式
const changeColor = (entries, observer) =>{
  entries.forEach(entry=>{
    if(!entry.isIntersecting){
      nav.classList.add('scrolled');
    }else{
       nav.classList.remove('scrolled');
    }
  })
  
}

//做一個新的觀察
let observer = new IntersectionObserver(changeColor, options);
//觀察對象section1
observer.observe(section1);

以上！

今天的code:在這裡

有任何問題想法歡迎留言～