Day24 Sticky Nav

第24天實作要做出向下捲動頁面時，遇到導覽列時，其導覽列會固定在網頁上方，導覽列也會有所變化。當網頁向下滾動時，導覽列也會固定在上方，但當網頁向上捲動回到特定位置，導覽列會回到原本位置。

在網頁中上至下的結構為圖片，導覽列，內容。首先要取得導覽列nav導覽列離網頁最上方的距離，

const topNav = nav.offsetTop

接下來取得網頁向下捲動的距離window.scrollY，加入判斷當向下捲動的距離>=導覽列nav的距離時，將body加入CSS的Class，其Class的目的是將導覽列nav給固定住。為何要加在body中，因為只要加入body中，之後加入變化的效果時，只需要改變的CSS內容即可。

.nav-fix{
  position: fixed;
}

但此時會生一個小問題，就是當nav固定在網頁上方時會產生一個跳動的動畫，才造成元素的貼合，因此為了避免這個問題的發生，在body的元素中加入上邊內距paddingTop等同nav的高度。

document.body.style.paddingTop = nav.offsetHeight + 'px'

再當解除固定nav時，再將其上邊內距paddingTop回復成原本的樣式。

document.body.style.paddingTop = 0

再當nav固定在網頁上時，讓nav其中的一個元素呈現出來。一開始nav中類別為.logo的元素的寬度為0，因此當nav固定在網頁上時，將.logo的寬度設為300px。

.fixedNav li.logo{
  max-width: 300px;
}

這樣當nav固定時，.logo的寬度即可從0px成長至300px。

接下來是網頁的內容也要隨著nav的固定，內容的呈現效果將其放大。

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

一開始網頁內容的縮放為transform: scale(0.98);，在nav固定在網頁時，將其放大為transform: scale(1)。

這樣就可以做到本實作的目標。

Html

      <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">
        內容
    </div>

Javascript

1. scroll
   scroll滾動事件在元素上。

CSS

1. position
   1. static 無定位
   2. relative 相對定位
   3. absolute 絕對定位
   4. fixed 畫面絕對定位[1]
   5. sticky 滾動黏滯定位[2]

tags: position,