余白の積み上がり
min-heightを 180vh に伸ばすことで、上下に十分な余白を確保します。IntersectionObserver が 0.14 を超えた時点で is-visible を付与し、アニメーションを開始します。
Sticky列が常に見え続け、右側の詳細カードがIntersectionObserverで切り替わる最小構成です。
スクロールしても位置を保つ軸情報です。カードの状態は下部のステータスにリアルタイムで表示されます。
min-heightを 180vh に伸ばすことで、上下に十分な余白を確保します。IntersectionObserver が 0.14 を超えた時点で is-visible を付与し、アニメーションを開始します。
ACTIVE_ON を 0.58、ACTIVE_OFF を 0.4 に設定し、スクロールの前後で滑らかにハイライトが切り替わるようにしました。 固定カラムは top: var(--sticky-top) で自由に位置変更できます。
ボックスシャドウと scale を併用して、アクティブカードだけをわずかに浮かせます。色相は --hue カスタムプロパティで制御しています。