スクロールで現れる固定CTA
商品ページを読み進めて価格が画面外に消えたところで、下から価格＋「カートに入れる」の帯が現れる。上へ戻って価格が見えると帯は引っ込む。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
デザインの要点
- 帯を出す条件は「本文の価格が画面から消えた」こと。最初から出しっぱなしにすると本文の一部を常に隠す
- 帯には価格と主 CTA と安心の一言（送料無料・返品可）だけ。副 CTA は本文側に残して主役を守る
- 帯の高さぶん、本文の末尾に padding-bottom を足す。最後の段落やフッターが帯の裏に隠れる事故を防ぐ
- 出入りは transform で行う。高さを変えると本文がガタつき、読んでいる位置がずれる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
プレビューでは枠内スクロールのため IntersectionObserver の root を内側のスクローラーにしています。実ページでは root を省略（ビューポート）し、.sco-bar を position:fixed; bottom:0 にしてください。帯が出ていない間は aria-hidden で読み上げから外し、本文の CTA と二重に読まれないようにしています。
コード（コピーして使えます）
<div class="sco-phone">
<div class="sco-scroll" id="sco-scroll" tabindex="0" aria-label="商品ページ（スクロール）">
<div class="sco-photo" aria-hidden="true"></div>
<div class="sco-body">
<p class="sco-brand">ミナト工房</p>
<h2 class="sco-name">オーク材のサイドテーブル</h2>
<p class="sco-price" id="sco-price">¥24,800 <span class="sco-tax">税込</span></p>
<p class="sco-line">送料無料 ・ 30 日以内の返品可</p>
<h3 class="sco-h">特長</h3>
<p class="sco-p">無垢のオーク材を 3 年乾燥させてから削り出しています。天板の厚みは 25mm。ソファの肘掛けと同じ高さ（55cm）に合わせました。</p>
<h3 class="sco-h">サイズ</h3>
<p class="sco-p">幅 40cm ・ 奥行 40cm ・ 高さ 55cm ・ 重さ 4.2kg。脚は工具なしで取り付けられます。</p>
<h3 class="sco-h">お届け</h3>
<p class="sco-p">ご注文から 5〜7 日でお届けします。受注生産のため、1 点ずつ木目が異なります。</p>
<h3 class="sco-h">お手入れ</h3>
<p class="sco-p">乾いた布で拭いてください。年に 1 度、オイルを塗り直すと艶が戻ります。オイルは同梱しています。</p>
</div>
</div>
<div class="sco-bar" id="sco-bar" aria-hidden="true">
<div class="sco-bar-info"><span class="sco-bar-price">¥24,800</span><span class="sco-bar-note">送料無料 ・ 30日返品可</span></div>
<button class="sco-btn" type="button" id="sco-btn">カートに入れる</button>
</div>
<p class="sco-toast" id="sco-toast" role="status" aria-live="polite"></p>
</div>