スクロールして画面から消えたボタンをもう一度表示！ページの移動を促す固定ボタンの作り方。

お問い合わせや資料請求、ショッピングカートへの誘導（CTA/コールトゥアクション）としてよくある固定ボタンUIをご紹介します。

実際の挙動を動画で御覧ください。

今回のサンプルでは、「動くブロック」の全体が見えると「固定ブロック」が下から表示されるようにScriptを組んでいますが、動くブロックのどの部位を検知するのか、検知の頻度、タイミングずらしたりタイミングを早めたり遅らせたり動作を細かくコントロールできます。

もちろん下から出るだけでなく、横からスライドインしたりその場でフェードインしたりアニメーションの演出もいろいろ可能です。

ソースコードと実際の挙動は下記で確認できます。

scrollイベントに比べ、ブラウザのメモリ負荷の少ない交差オブザーバーAPI (Intersection Observer API) を使って実装しています。

目に見えない部分でパフォーマンスが向上しています。