今回は、ヘッダーを例とします。 HTML は、非常に単純なものです。 <header id="header">サイト名やナビなどを書く</header> 次は JavaScript です。requestAnimationFrame() を使い、スクロールイベントを設定します。 let offset = 0; let lastPosition = 0; let ticking = false; const header = document.getElementById('header'); const height = 56; const onScroll = () => { if (lastPosition > height) { if (lastPosition > offset) { header.classList.add('head-animation'); } else { h
![下スクロールで消える・上スクロールで現れる素の JavaScript](https://cdn-ak-scissors.b.st-hatena.com/image/square/70e4176a3162e4da7433fb44ad856446a2997cbf/height=288;version=1;width=512/https%3A%2F%2Ffirstlayout.net%2Fwp-content%2Fuploads%2F2019%2F11%2Fscroll-down-and-scroll-up-with-javascript-requestanimationframe.png)