Sticky 要素の固定位置をリアルタイムで調整
--sticky-top を変更すると固定ヘッダーの基準位置がどのように変化するかを確認できます。スクロール領域は 380px に制限しています。
--sticky-top (px)
現在値:
110
px
Sticky Header (top: var(--sticky-top) × 0.5)
Step 01
スクロール量が小さいときに、ヘッダーがどこで止まるかを確認します。
Step 02
任意の位置で固定させることで、視線のフォーカスを維持し続けます。
Step 03
高さが足りない場合は余白を加え、sticky 要素が解除される区間を調整します。
Step 04
PC とモバイルで異なる top 値を使い分ける戦略も簡単に検証できます。
viewport.scrollTop: 0px / sticky offset: 110px