【jQuery】スクロールに合わせた背景色の切り替え処理

[ ID : 4959 ]
シルバー
【jQuery】スクロールに合わせた背景色の切り替え処理
実装目安
3分

概要

スクロールをして対象の要素が画面上部に到達したタイミングで、bodyなどのターゲット要素の背景色を変更する処理をjQueryで実装。

用途・要件

  • 対象の要素に対して、「data-bg-color=”#999″」のようにdata属性を付与して背景色を設定する。
  • スクロールして対象の要素が画面上部に到達したタイミングで背景色が変更される。cssのtransitionを設定する事で、フワッと色が切り替わる。
  • scroll, reseizeイベントを使用。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

その他

  • jQuery v3.6.0使用。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録