ДОБАВЬТЕ / УДАЛЯЙТЕ классы в отдельные div-ы на основе прокрутки, каждый div имеет свой уникальный класс

Question

Я пытаюсь использовать этот пост: Добавить / удалить класс с jquery на основе вертикальной прокрутки? Но не могу заставить его работать с несколькими элементами div, у каждого из которых есть свой класс и требуют добавления / удаления 1 класса на разных расстояниях от вершины. На высоком уровне вот что я хочу, чтобы произошло:

<div class="div-01">1 class added and 1 class removed when user scrolls down 500px from top and reverse if scrolling up</div>
<div class="div-02">1 class added and 1 class removed when user scrolls down 1000px from top and reverse if scrolling up</div> 
<div class="div-03">1 class added and 1 class removed when user scrolls down 1500px from top and reverse if scrolling up</div>

Answer 1

Вы пробовали что-то подобное? Это длинная форма и полная, но я давно не писал jQuery, и я просто копирую часть ответа, который вы связали.

Редактировать

Я обновил скрипку, которую вы опубликовали. Вы можете объединить «больше чем» и «меньше чем» в одну строку.

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

    if (scroll >= 200 && scroll < 800) {
        $(".div-01").addClass("darkHeader");
    } else {
        $(".div-01").removeClass("darkHeader");
    }
    if (scroll >= 1000 && scroll < 1800) {
        $(".div-02").addClass("darkHeader");
    } else {
        $(".div-02").removeClass("darkHeader");
    }
    if (scroll >= 2000 && scroll < 2400) {
        $(".div-03").addClass("darkHeader");
    } else {
        $(".div-03").removeClass("darkHeader");
    }
});

.div-01, .div-02, .div-03 {
  background: red;
  height: 1000px;
  width: 500px;
  margin-bottom: 10px;
} 

.darkHeader {
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="div-01"></div>
<div class="div-02"></div>
<div class="div-03"></div>