{ "id": "motion:motion-sticky", "slug": "motion-sticky", "kind": "motion", "title": { "ja": "スティッキー", "en": "Sticky" }, "aiName": "position: sticky", "summary": { "ja": "見出しが上に貼り付く", "en": "Headings stick to the top as you scroll" }, "number": 17, "group": "pin-nav", "techniques": [ "position-sticky" ], "rules": [ { "ja": "見出しは自分の区画の中でだけ貼り付き、区画を越えて残らない", "en": "Each heading sticks only within its own section, never across sections" }, { "ja": "見出しの背景は不透明にし、下の本文が透けないようにする", "en": "Headings have an opaque ground background so the content below does not show through" }, { "ja": "動きを減らす設定では sticky を解除し、見出しを通常の流れで並べる", "en": "Under prefers-reduced-motion, turn sticky off and keep all headings in normal flow" } ], "reproduction": { "prompt": { "ja": "スティッキー — position: sticky\n\nスクロールに合わせて各区画の見出しが画面上端に貼り付く演出を作ってください。区画は 4 つで、それぞれ高さを 100vh 以上にします。各区画の先頭の見出しに position: sticky; top: 0 を付け、背景は var(--ground) で塗って下の境界線を 1px 引きます。区画の下端に達すると、その見出しは区画の底に押されて画面の上へ消えます。動きを減らす設定では sticky を解除して、4 つの見出しを通常の流れで並べてください。CSS の position: sticky だけで実装し、JavaScript とライブラリは使わないでください。\n\n外すと崩れる点:\n- 見出しは自分の区画の中でだけ貼り付き、区画を越えて残らない\n- 見出しの背景は不透明にし、下の本文が透けないようにする\n- 動きを減らす設定では sticky を解除し、見出しを通常の流れで並べる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-sticky/demo.html", "en": "Sticky — position: sticky\n\nBuild a section list where each section's heading sticks to the top of the viewport as you scroll. Use four sections, each at least 100vh tall, and give each heading position: sticky; top: 0 with a var(--ground) background and a 1px bottom rule. When a section reaches its end, its bottom edge pushes the heading off the top of the screen. Under prefers-reduced-motion, turn sticky off and show the four headings in normal flow. Implement it with CSS position: sticky alone, with no JavaScript and no library.\n\nDo not drop:\n- Each heading sticks only within its own section, never across sections\n- Headings have an opaque ground background so the content below does not show through\n- Under prefers-reduced-motion, turn sticky off and keep all headings in normal flow\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-sticky/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-sticky/demo.html", "html": "\n\n\n\n\n17 スティッキー — position: sticky\n\n\n\n
\n
\n

17

\n

スティッキー

\n

position: sticky

\n

見出しが上に貼り付く

\n

SCROLL ↓

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

Section 01 / 04

\n

見出しが入ります

\n
\n
\n

本文のダミーです。見出しは自分の区画の中でだけ貼り付きます。

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

Section 02 / 04

\n

見出しが入ります

\n
\n
\n

本文のダミーです。次の見出しが来ると、この見出しは押し出されます。

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

Section 03 / 04

\n

見出しが入ります

\n
\n
\n

本文のダミーです。区画ごとに見出しが入れ替わります。

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

Section 04 / 04

\n

見出しが入ります

\n
\n
\n

本文のダミーです。最後の区画の見出しは、ページの終わりまで残ります。

\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-sticky", "en": "https://design-vault.pages.dev/en/designs/motion-sticky", "json": "https://design-vault.pages.dev/ai/assets/motion-sticky.json", "designJson": null } }