垂直スクロールに基づくjqueryでクラスを追加/削除しますか？

質問

基本的には、ユーザーが少しスクロールダウンした後に「header」からクラスを削除し、別のクラスを追加して外観を変更したいと思います。

これを行う最も簡単な方法を見つけようとしていますが、私はそれを動作させることはできません。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}    

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

何かとても初歩的なことを間違えているような気がするのですが。

どのように解決するのですか？

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

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

フィドル

また clearHeader クラスを削除することで position:fixed; を要素から削除し、さらに $(".clearHeader") セレクターで再選択することもできます。そのクラスを削除せず、スタイリングのためにその上に新しい CSS クラスを追加することをお勧めします。

そして、ユーザーがスクロールアップして戻ってきたときに、クラス追加を "リセット" したい場合。

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

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

フィドル

を編集してください。 これはヘッダーセレクタをキャッシュするバージョンです。スクロールするたびにDOMに問い合わせないのでパフォーマンスが向上し、参照を失うことなく安全にヘッダー要素に任意のクラスを削除/追加することができます。

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

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

フィドル