{ "id": "motion:motion-hide-on-scroll-header", "slug": "motion-hide-on-scroll-header", "kind": "motion", "title": { "ja": "隠れるヘッダー", "en": "Hide-on-scroll header" }, "aiName": "Hide-on-scroll header", "summary": { "ja": "下で隠れ、戻すと出る", "en": "Hides when scrolling down and returns on scroll up" }, "number": 23, "group": "pin-nav", "techniques": [ "css-transition" ], "rules": [ { "ja": "下方向で隠し、上方向で出す。方向の判定には 8px のしきい値を置く", "en": "Hide on scroll down and reveal on scroll up, deciding direction only past an 8px threshold" }, { "ja": "名札の中では出さない。名札を抜けてから初めて現れる", "en": "Stay hidden inside the title block; it first appears only after the title block is passed" }, { "ja": "動きを減らす設定では JS で隠さず、常に表示したままにする", "en": "Under reduced motion, never hide it; keep the header visible" } ], "reproduction": { "prompt": { "ja": "隠れるヘッダー — Hide-on-scroll header\n\n画面上端に高さ 64px の固定ヘッダーを置く。下へスクロールしたら translateY(-100%) で画面外へ隠し、上へ戻したら translateY(0) で出す。\n方向の判定は、直前に採った位置から差が 8px を超えたときだけ行い、小さな揺れでは切り替えない。\n名札（高さ 72vh）の中にいる間は、方向に関係なく隠したままにする。\n切り替えは 0.7 秒の ease で、CSS と passive な scroll リスナー 1 本だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 下方向で隠し、上方向で出す。方向の判定には 8px のしきい値を置く\n- 名札の中では出さない。名札を抜けてから初めて現れる\n- 動きを減らす設定では JS で隠さず、常に表示したままにする\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-hide-on-scroll-header/demo.html", "en": "Hide-on-scroll header — Hide-on-scroll header\n\nPlace a fixed 64px header at the top edge. When the user scrolls down, slide it out with translateY(-100%); when they scroll up, bring it back to translateY(0).\nJudge direction only after the position has moved more than 8px from the last accepted position, so small jitter never toggles it.\nWhile the reader is still inside the 72vh title block, keep the header hidden in both directions.\nAnimate over 0.7s with the ease curve, using CSS and a single passive scroll listener; no library.\n\nDo not drop:\n- Hide on scroll down and reveal on scroll up, deciding direction only past an 8px threshold\n- Stay hidden inside the title block; it first appears only after the title block is passed\n- Under reduced motion, never hide it; keep the header visible\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-hide-on-scroll-header/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-hide-on-scroll-header/demo.html", "html": "\n\n\n\n\n23 隠れるヘッダー — Hide-on-scroll header\n\n\n\n
\n
\n

23

\n

隠れるヘッダー

\n

Hide-on-scroll header

\n

下で隠れ、戻すと出る

\n

SCROLL ↓

\n
\n
\n\n
\n
\n

ロゴ

\n \n
\n
\n
\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。下へ進むとバーが隠れ、上へ戻すと現れます。

\n
\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。下へ進むとバーが隠れ、上へ戻すと現れます。

\n
\n
\n
\n
\n

Section 3

\n

見出しが入ります

\n

本文のダミーです。下へ進むとバーが隠れ、上へ戻すと現れます。

\n
\n
\n
\n
\n

Section 4

\n

見出しが入ります

\n

本文のダミーです。下へ進むとバーが隠れ、上へ戻すと現れます。

\n
\n
\n
\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-hide-on-scroll-header", "en": "https://design-vault.pages.dev/en/designs/motion-hide-on-scroll-header", "json": "https://design-vault.pages.dev/ai/assets/motion-hide-on-scroll-header.json", "designJson": null } }