ホーム > 応用 > 【JavaScript】スクロールで動くヘッダーを作ってみよう

【JavaScript】スクロールで動くヘッダーを作ってみよう

投稿日：2026/04/01

最終更新日：2026/04/01

有名なサイトやアプリを見ていただくと明らかですが、よく動くヘッダーが使われています。

また下にスクロールをしたらヘッダーが上にいったり、透明になったり。

今回の記事では初めての動くヘッダーを作るという方のために、簡単な動くヘッダーの作り方を解説していきます。

今回の記事でわかること

JavaScriptを用いた動くヘッダーの作り方

実際に作る前に必要なもの

まず実装する前に必要なものが HTML,CSS,JavaScriptファイルが必要です。

HTMLはヘッダーの基盤を作るために

CSSは見た目を整えるために

JavaScriptは動きをつけるために必要です。

Yama

私の場合はヘッダーが動かせるようになったときより一層JavaScriptの理解が深まりました。
そのためがJavaScriptの学習といった意味でも良い練習になると思います。

実際のJavaScriptコードをご紹介

では実際のコードを用いてさっそく作っていきましょう。

                
var scrollY2 = 0;
window.addEventListener("scroll", () => {

  const scrollY = window.scrollY; 
  

  
  if (scrollY - scrollY2 > 0) {
    const elem = document.getElementById('head')
    elem.style.position = "fixed"
    elem.style.transform = "translate(0px, -100px)"
    elem.style.transition = "0.5s"
    scrollY2 = scrollY

  } else {
    const elem = document.getElementById('head')

    elem.style.transform = "translate(0px, 0px)"
    
    elem.style.transition = "0.5s"
    elem.style.position = "fixed"


    scrollY2 = scrollY
  }
}
);

では解説していきます。まずはこの部分から

これはスクロールした後の差分を計算するためにこの変数を設置。詳しい使い方はこの後わかります。

縦軸の計測であるため、名前はscrollY2にしてありますが、好きな名前をお書きください。
↓

                  
var scrollY2 = 0;

これはwindow.addEventListenerでscrollを指定することでスクロールを検知することができます。
↓

                  
window.addEventListener("scroll", () => {

これは現在の座標をscrollYに代入します。
↓

                  
const scrollY = window.scrollY;

それからif文の利用です。 scrollY - scrollY2 > 0 つまり現在の座標がスクロール前の座標より大きかったらという意味です。

それからここからは読者様のコードによるのですが、もしHTMLのidに id = "head"というように指定していた場合を想定します。

ヘッダーのidのheadを取得し、それに対してスタイルの変更を加えます。

これはCSSの知識を用います。

idがheadのpositionをfixに、またtranslateを利用してヘッダーの座標を上にずらします。それからtransitionを用いて、動きを滑らかにします。

そして最後に現在の座標を次のスクロール後の座標と比べるために用意しておいたscrollY2に代入します。
↓

                  
if (scrollY - scrollY2 > 0) {
    const elem = document.getElementById('head')
    elem.style.position = "fixed"
    elem.style.transform = "translate(0px, -100px)"
    elem.style.transition = "0.5s"
    scrollY2 = scrollY

  }

そして最後にelse文でヘッダーを見える位置に戻すためのコードを記述します。

全体的にコードは同じですが、値と順序が違う部分があるので注意しましょう。
↓

                  
else {
    const elem = document.getElementById('head')

    elem.style.transform = "translate(0px, 0px)"
    
    elem.style.transition = "0.5s"
    elem.style.position = "fixed"


    scrollY2 = scrollY
  }

Yama

私の場合は、少しスクロールしただけでヘッダーが動いてしまうのが好みではなかったため
座標が100以上という条件をさらにif文に追加したことがあります。
是非好みの動きを探してみてください

まとめ

以上がJavaScriptを用いた動くヘッダーの作り方でした。

スクロール前と後での差分を計算することによるヘッダーが動くための条件を指定しました。

またヘッダーの見た目を良くすることでより完成度が高くなるのでそこにも力を入れることをお勧めします。

もしわからない部分があれば、お問い合わせフォームにてご連絡を承っておりますので是非ご活用ください。