WES BOS系列影片
Alex快速導讀系列影片

今天針對常用的Navbar做fix的狀態
這真的是很常見的功能，可以立馬學起來

1.先抓出NavBar的位置，以及等等需要用到的容器最上部

const nav = document.querySelector('#main')
let topOfNav = nav.offsetTop

2.到Css中寫好fix的狀態

body.fixed-nav nav {
  position: fixed;
  box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}

3.利用JS加上.fixed-nav或移除.fixed-nav，
來控制nav是否需要fix狀態

function fixNav() {
  console.log(topOfNav)
  if(window.scrollY >= topOfNav) {
    document.body.classList.add('fixed-nav')
  } else {
    document.body.classList.remove('fixed-nav')
  }
}
window.addEventListener('scroll', fixNav)

做到這裡會發現fix狀態做好了，但下方的文章會因為navbar變為fix
而產生跳動的情形，這是因為position:fixed時，
此容器(nav)會是漂浮的狀態，對其他容器來說它的寬高等於0
所以我們就需要手動加回去，因fix失去的高度

function fixNav() {
  console.log(topOfNav)
  if(window.scrollY >= topOfNav) {
    document.body.classList.add('fixed-nav')
    document.body.style.paddingTop = nav.offsetHeight + 'px'
  } else {
    document.body.classList.remove('fixed-nav')
    document.body.style.paddingTop = 0;
  }
}

4.logo進場的css，
也是利用.fixed-nav這個class做控制

.fixed-nav li.logo {
  max-width: 500px;
}

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30