シンプルだから使いやすい！ページの途中で上方向にスクロールするとヘッダを上部から表示する超軽量スクリプト -Peek

サイト構築 -JavaScript

Post on:2026年3月10日

sponsorsr

ユーザーが下方向にスクロールするとヘッダを自動的に非表示にし、ページの途中で上方向にスクロールするとヘッダを表示する、超軽量のスクリプトを紹介します。

実装は非常に簡単で、カスタマイズも簡単、既存のWebページに導入することも簡単です。依存関係はなく、単独で動作します。

ページの途中で上方向にスクロールするとヘッダを上部から表示するだけのシンプルな超軽量スクリプト -Peek

Peek
Peek -GitHub

Peekの特徴
Peekのデモ
Peekの使い方

Peekの特徴

Peekはスクロールの意図に基づくヘッダ動作を実現する超軽量のJavaScriptライブラリです。下方向にスクロールするとヘッダを自動的に非表示にし、上方向にスクロールするとアニメーションでヘッダを上から表示します。

Peekはすべてのモダンブラウザ（Chorme, Edge, Safari, Firefox, Opera）をサポートしています。ライセンスはMITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

Peek

Peekの主な特徴は、下記の通り。

超軽量のスクリプト（3.89 KB）

依存関係がなく、必要最小限のスクリプト
スクロールの正確な検出

意図的なスクロールと微小な動作の違いを判別
スムーズなアニメーション

requestAnimationFrameを使用して最適なパフォーマンスを実現
実装が簡単

あらゆるウェブサイトで、あらゆるフレームワークで動作
カスタマイズも簡単

アニメーションの動きやしきい値などはCSSで設定
パッシブイベントリスナー

スクロールのパフォーマンスを向上

Peekのデモ

デモページで、ページの途中から上方向にスクロールしてみてください。上からヘッダが表示されます。さらに下方向にスクロールすると、ヘッダは非表示になります。

デモページ

Peekの使い方

JavaScriptファイル、peek.jsまたはpeek.min.js をダウンロードして、使用するページに外部ファイルとして記述します。

<script src="path/to/peek.js"></script>

1	<script src="path/to/peek.js"></script>

HTMLは既存のものを使用できますが、ヘッダに.header-mainを付与します。
※class名は変更可能。

<header class="header-main">
  ヘッダのコンテンツ
</header>

ヘッダのコンテンツ

</header>

CSSは、下記をコピペで記述します。
※カスタマイズが必要なときは、CSSを変更することでカスタマイズできます。

.header-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.3s ease;
  will-change: transform;
}

.main-header--unpinned {
  transform: translateY(-100%);
}

.main-header--pinned {
  transform: translateY(0);
}

.main-header--top {
  /* ページ上部のスタイル */
}

.main-header--not-top {
  /* オフセットを超えてスクロールしたときのスタイル */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-main {

position: fixed;

top: 0;

left: 0;

right: 0;

transition: transform 0.3s ease;

will-change: transform;

}

.main-header--unpinned {

transform: translateY(-100%);

}

.main-header--pinned {

transform: translateY(0);

}

.main-header--top {

/* ページ上部のスタイル */

}

.main-header--not-top {

/* オフセットを超えてスクロールしたときのスタイル */

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

最後に、JavaScriptを記述します。

// デフォルトのオプションで初期化
const peek = Peek('.header-main');

// または動作をカスタマイズ
const peek = Peek('.header-main', {
  offset: 150,
  tolerance: 10,
  classes: {
    pinned: 'main-header--pinned',
    unpinned: 'main-header--unpinned',
    top: 'main-header--top',
    notTop: 'main-header--not-top'
  }
});

// デフォルトのオプションで初期化

const peek = Peek('.header-main');

// または動作をカスタマイズ

const peek = Peek('.header-main', {

offset: 150,

tolerance: 10,

classes: {

pinned: 'main-header--pinned',

unpinned: 'main-header--unpinned',

top: 'main-header--top',

notTop: 'main-header--not-top'

}

});

オプションの設定は、下記の通り。

offset

デフォルト: 100（数値のみ）

状態変化をトリガーする前のスクロールのオフセット（ピクセル数）
tolerance

デフォルト: 5（数値のみ）

ピン留めとピン解除状態の変更前にスクロールしたピクセル数
classes.pinned

デフォルト: main-header--pinned（文字列のみ）

ヘッダが表示・ピン留めされているときに適用されるクラス
classes.unpinned

デフォルト: main-header--unpinned（文字列のみ）

ヘッダが非表示・ピン留めされていないときに適用されるクラス
classes.top

デフォルト: main-header--top（文字列のみ）

ページの先頭に適用されるクラス（オフセット以下）
classes.notTop

デフォルト: main-header--not-top（文字列のみ）

オフセットを超えてスクロールしたときに適用されるクラス