Day24 Sticky Nav

 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><a href=”#”>Home</a><>
<li><a href=”#”>About</a><>
<li><a href=”#”>Images</a><>
<li><a href=”#”>Locations</a><>
<li><a href=”#”>Maps</a><>
</ul>
</nav>

<div class=”site-wrap”>
內容
</div>
Javascript
scroll
scroll滾動事件在元素上。
CSS
position
static 無定位
relative 相對定位
absolute 絕對定位
fixed 畫面絕對定位[1]
sticky 滾動黏滯定位[2]