jQuery を使用して垂直スクロール位置に基づいて CSS クラスを追加および削除するにはどうすればよいですか?

垂直スクロールに基づいた jQuery によるクラスの追加/削除

このインスタンスの目標は、「ヘッダー」からクラスを削除することです。ユーザーが一定距離下にスクロールすると、要素を作成し、別のクラスを適用して外観を変更します。ただし、提供されたコードは、いくつかの軽微なエラーにより意図したとおりに機能しません。

修正されたコードは次のとおりです:

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // >=, not <=
    if (scroll >= 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

主に 3 つの問題がありました:

1. 比較演算子が間違っていました。スクロール位置が 500 以上であるかどうかを確認するには、>= である必要があります。
2. 削除するクラス名のスペルが、clearHeader ではなく、clearheader と間違っていました。
3. ;関数宣言の最後に がありませんでした。

これらのエラーを修正することに加えて、次の点を考慮してください:

• clearHeader クラスを削除する代わりに、clearHeader クラスを追加することをお勧めします。 darkHeaderクラスをそれに追加します。これにより、ヘッダーの外観を変更しながらヘッダーの位置が保持されます。
• 上にスクロールして戻るときにクラスをリセットするには、以下に示すように 2 番目の条件を使用します。

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

最後に、キャッシュします。ヘッダーの jQuery オブジェクトは、特にそのクラスを複数回変更する予定がある場合、パフォーマンスを向上させることができます。

var header = $(".clearHeader");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('clearHeader').addClass("darkHeader");
    } else {
        header.removeClass("darkHeader").addClass('clearHeader');
    }
});

これらに対処することで、問題を解決し、ユーザーの垂直スクロール位置に基づいてヘッダーにクラスを効果的に追加および削除できるようになりました。

以上がjQuery を使用して垂直スクロール位置に基づいて CSS クラスを追加および削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。