JS30 day24 - Sticky Nav

作業內容

今天的作業相較之下簡單多了，但還滿實用的！就是頁面往下滑動，碰到導覽列之後導覽列會繼續往下滑動不會消失可以參考這份CodePen的效果一開始是這樣：往下滑會變成這樣：

學到什麼

CSS
1. 一般直覺上會想要在產生效果的時候，如果要做的是固定 navbar，會直接在 navbar 上面加上 class，但他比較特別的是把 body 本身加上 fixed-nav 的 class，這樣一來其他要產生效果的地方，比方說 logo 跟文章本體就不用在另外加上 class 是個比較好的做法
```
.fixed-nav nav{
  position: fixed;
  box-shadow: 0 5px rgba(0,0,0,0.1)
}
.fixed-nav li.logo{
  max-width: 500px;
}
.fixed-nav .site-wrap{
  transform: scale(1);
}
```

這次在 JS 上面的程式碼倒是很簡單，主要在於細節的部分，像是在 nav 變成 fixed 的當下，文章會往上跳，因為 fixed 物件是不佔空間的，文章會往上跳 nav 的高度的空間，所以我們必須當下把他加回來

function fixNav(){
  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
  }
}

參考資料： https://github.com/wesbos/JavaScript30

code 內容：

HTML:

  <header>
    <h1>A story about getting lost.</h1>
  </header>

  <nav id="main">
    <ul>
      <li class="logo"><a href="#">LOST.</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Images</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Maps</a></li>
    </ul>
  </nav>

  <div class="site-wrap">
    <p> ... </p>
  </div>

CSS:

html {
  box-sizing: border-box;
  background: #eeeeee;
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
}

body {
  margin: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.site-wrap {
  max-width: 700px;
  margin: 70px auto;
  background: white;
  padding: 40px;
  text-align: justify;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
  transform: scale(0.98);
  transition: transform 0.5s;
}

.fixed-nav .site-wrap{
  transform: scale(1);
}

header {
  text-align: center;
  height: 50vh;
  background: url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  color: white;
  font-size: 7vw;
  text-shadow: 3px 4px 0 rgba(0,0,0,0.2);
}

nav {
  background: black;
  top: 0;
  width: 100%;
  transition: all 0.5s;
  position: relative;
  z-index: 1;
}

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

nav ul {
  margin: 0;
  padding:0;
  list-style: none;
  display: flex;
}

nav li {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

li.logo {
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all .5s;
  font-weight: 600;
  font-size: 30px;
}

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

li.logo a {
  color: black;
}

nav a {
  text-decoration: none;
  padding: 20px;
  display: inline-block;
  color: white;
  transition: all 0.2s;
  text-transform: uppercase;
}

JS:

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

  function fixNav(){
    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
    }
  }
  window.addEventListener('scroll', fixNav)