← 一覧へ

やってみよう下へスクロールするとヘッダーが隠れ、少し上に戻すと出てきます

スクロールマイナー（知る人ぞ知る）

ハイドオンスクロール

Hide on Scroll / Auto-hiding Header

下にスクロールするとヘッダーがスッと隠れ、少し上に戻すとまた出てくる。

別名スクロールで隠れるヘッダークイックリターンスマートヘッダーEnter Always

どこで使われている？

よく見かける場所
Chrome・Safari のアドレスバー、ニュースアプリ、ブログ
使うとよい場面
記事や写真をなるべく広い画面で読ませたいとき
避けたい場面
ヘッダーに常に使うボタンがある画面

似ているものとの違い

スクロールで動くヘッダーの違い（スティッキーヘッダー・ハイドオンスクロール・ラージタイトル）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「ハイドオンスクロール（Hide on Scroll / Auto-hiding Header）」を実装してください。

動き：下方向にスクロールしているときは画面上部のヘッダーを上へスライドさせて隠し、上方向に少しでもスクロールしたらすぐに戻して表示する。読むときは画面を広く使えて、戻ればすぐ操作できる。

使う部品：スクロール方向を判定して transform: translateY で出し入れ
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトならスクロール方向を判定して transform: translateY で出し入れ
iPhoneアプリなら標準部品なし。自作（UIKit なら hidesBarsOnSwipe）
AndroidアプリならTopAppBarDefaults.enterAlwaysScrollBehavior()
FlutterならSliverAppBar(floating: true, snap: true)
React NativeならAnimated + スクロール位置で自作

似ているもの・一緒に使うもの