この例では、垂直スクロール

に基づいてjqueryを使用してクラスを追加/削除します。この例では、ユーザーが特定の距離をスクロールすると、「ヘッダー」要素からクラスを削除し、別のクラスを適用して外観を変更することです。ただし、提供されたコードは、いくつかの軽微なエラーのために意図されているように機能していません。

修正コードは次のとおりです。 var scroll = $（window）.scrolltop（）; //> =、not = 500）{ // ClearHeader、ClearHeaderではない-Caps h $（ "。clearheader"）。addclass（ "darkheader"）; } }）;

3つの主な問題がありました。 > =スクロール位置が500以上であるかどうかを確認する必要があります。関数宣言の終わりにはありませんでした。これにより、外観を変更しながらヘッダーの位置が保存されます。 $（ "。clearheader"）。addclass（ "darkheader"）; } それ以外 { $（ "。clearheader"）。removeclass（ "darkheader"）; }

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

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

最後に、ヘッダーのjQueryオブジェクトをキャッシュすると、特にクラスを複数回変更する予定がある場合は、パフォーマンスを改善できます。 $（window）.scroll（function（）{ var scroll = $（window）.scrolltop（）; if（scroll> = 500）{ Header.RemoveClass（ 'ClearHeader'）。AddClass（ "Darkheader"）; } それ以外 { header.RemoveClass（ "Darkheader"）。AddClass（ 'ClearHeader'）; } }）;

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