Так что, в основном, я хотел бы удалить класс из «заголовка» после того, как пользователь прокрутит немного вниз и добавит другой класс, чтобы изменить его внешний вид.

Пытаюсь найти самый простой способ сделать это, но я не могу заставить его работать.

$(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>

Я уверен, что делаю что-то очень неправильное.