一定量スクロールしたらクラスを付加する

ページを一定量スクロールしたらクラスを付加する方法を紹介します。クラスを付加することで、表示・非表示を切り替えたり、文字や背景色の色を変えることができます。

HTML

jQuery

補足

• このサンプルではスクロール量が 200 ピクセルを超えたら、#container に BG-BLUE クラスを付加しています。逆にスクロール量が 200 ピクセル以下になったら、BG-BLUE クラスを削除しています。

CSS

補足

• BG-BLUE クラスで背景色を指定しています。

サンプル

「一定量スクロールしたらクラスを付加する」のサンプル

関連記事

• スクロール方向に応じてメニューを表示・非表示
• スクロール時に指定要素がウィンドウ内に入ったらフワッと表示