Fixed/Sticky Navigation
向下捲動畫面，固定Navigation的方法：

main.html

<body>

<header class="header">

<div>title</div>

</header>



<nav class="nav">

this should be fixed

</nav> <section class="content">

<-- long content -->

</section>

</body>

main.js

const header = document.querySelector('.header');

const nav = document.querySelector('.nav');

const navSibling = nav.nextElementSibling; const originTop = navSibling.style.marginTop; window.addEventListener('scroll', () => {

if(window.pageYOffset > header.clientHeight){

nav.style.position = 'fixed';

nav.style.top = 0;

nav.style.width = '100%';

navSibling.style.marginTop = originTop + nav.clientHeight;

} else {

nav.style.position = 'static';

navSibling.style.marginTop = originTop;

}

});

當然，寫在js中的style可以另外寫成css的class，讓scroll時新增/移除這個class就楚清楚了。

但現在有更好的寫法，相同的html，但不需要js，僅用 css 就好

main.css

.nav {

position: sticky;

top: 0;

}

兩行解完，完勝 js 的解法。不需要DOM操作，也不用監聽scroll事件。

sticky 與 fixed最大的不同在於，被fixed的element會離開原本的layout，原本navigation的占有的空間會不見，如果sibing 的上方不立即回填一個高度，就會造成scroll的不流暢。

而sticky就是在「固定時」，仍然占有原本空間。

使用sticky一定要搭配 top (或bottom)，讓它知道相對於外層多少距離時，開始固定於畫面。所以sticky的其中一個缺點就是於外層如果有 position: relative，就有可能無法固定在window的相對位置。

sticky還有另一個缺點，就是瀏覽器的支援度較低，詳細請查MDN.
['Jayson Chiang']
['Js', 'HTML', 'CSS']