基于滚动向单个 div 添加/删除类，每个 div 都有自己独特的类

Question

我正在尝试使用此帖子：Add/remove class with jquery based on vertical scroll? 但似乎无法让它与多个 div 一起使用，每个 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>