概要
スクロールした際に固定されている要素の色が背景と同色の場合に同化しないよう色が変化する。用途・要件
- 固定ヘッダーが対象コンテンツまでスクロールすると、スクロールに合わせて色が変化する。
- DEMOでは画像とテキストの2パターンを用意。
注意事項
- data-midnight対象エリア部分にmargin等の余白を持たせてしまうと、切り替わるタイミングがずれてしまうため注意。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
その他
- jQuery v3.6.3使用。
- Midnight.js v1.1.1使用。
実装
「Midnight.js」
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
