Fixed/Sticky Navigation
Dec 26, 2020
向下捲動畫面，固定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.
