スクロール · スクロールで変わる
スクロール方向で収納するナビ按滚动方向收纳导航
- 道を譲る
- すぐ戻る
- 視界を邪魔しない
下へ読み進めると上部のバーが自分から引っ込み、画面を内容に譲ります。少しでも上へ戻すと即座に出てきます。ページのずっと下にいても同じです。
使いどころ
長いリスト、長文、情報密度の高いモバイル画面に向きます。短いページや、会計のように重要な操作がバーにある場合は隠さないでください。見つからなくなります。
パラメータ
deltaY > 15px → transform: translateY(-100%) · deltaY < -15px → transform: translateY(0) · 320ms ease-out
レシピ
スクロール方向で収納するナビ → 320ms ease-out条件 deltaY > 15px → transform: translateY(-100%)条件 deltaY < -15px → transform: translateY(0)
AI に渡す一文
スクロール方向で収納するトップバーを追加してください。前フレームとのスクロール位置を比べ、下方向なら translateY(-100%) で隠し、上方向なら即座に translateY(0) で戻します。15px の許容幅でぶれを吸収し、移動は 320ms ease-out。ページ最上部では常に表示してください。