スクロール追従するページ内ナビゲーション

Result

少しのVanillaなJSで作るページ内スクロールと追従するナビゲーション。よくドキュメントページとかナレッジ共有系のWebサイトで見かけますね。

今更感なネタですが、ボーっとCodePenの2020年ベストPenみたいな記事を眺めてたら見かけたので割と需要あるネタですしメモ的にと思って書いてます。

javascript

window.addEventListener('DOMContentLoaded', () => {

	const observer = new IntersectionObserver(entries => {
		entries.forEach(entry => {
			const id = entry.target.getAttribute('id');
			if (entry.intersectionRatio > 0) {
				document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
			} else {
				document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
			}
		});
	});

	document.querySelectorAll('section[id]').forEach((section) => {
		observer.observe(section);
	});
	
});

交差領域を監視して該当するナビゲーション項目にclassを付与する事で現在地を明示します

css

main > nav {
	position: sticky;
	top: 2rem;
	align-self: start;
}


.section-nav li.active > a {
	color: #333;
	font-weight: 500;
}

スクロール追従はposition: sticky;で実装。現在地の明示は付与したclassを使ってスタイリングすればOKですね。
このコードのナビゲーションは自動生成ではないので別途ごご用意ください

via

Smooth Scrolling Sticky ScrollSpy Navigation