今回は、ヘッダーを例とします。 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