今天我們要做的效果是讓nav bar隨著捲軸滾動
黏在最上方
並讓logo顯示出來

我們先來看看css吧！

nav {
    background:black;
    top:0;
    width: 100%;
    transition:all 0.5s;
    /* position: relative; */
    position: sticky;/*修改*/
    z-index: 1;
}
nav li {
  flex:1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
li.logo {
  /* max-width:0; */
  flex: 0; /*新增*/
  overflow: hidden;
  background: white;
  transition: all .5s;
  font-weight: 600;
  font-size: 30px;
}

原本作者給的素材
將nav的position值改成sticky，這樣才可以在nav bar滑到視窗頂端時釘住
接著
由於nav li已經有flex:1了
flex是flex-grow、flex-shrink、flex-basis的縮寫
意思是全部的空間
所有li的比例都是相等
因此
我們將一開始的.logo分配空間設定為0份

當nav bar滑到頂端的時候
才讓.logo也佔有一份
因此我們的code就是如此簡單

const nav = document.querySelector('#main');
const logo = document.querySelector('.logo');
const topOfNav = nav.offsetTop;
console.log(logo);

function fixNav() {
    window.scrollY >= topOfNav ? logo.style.flex = 1: logo.style.flex = 0; 
}
window.addEventListener('scroll', fixNav);

Demo
完整程式碼