基于滚动的各个div的ADD / REMOVE类，每个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 >= 500) {
        $(".div-01").addClass("darkHeader");
    } else {
        $(".div-01").removeClass("darkHeader");
    }
    if (scroll >= 1000) {
        $(".div-02").addClass("blueHeader");
    } else {
        $(".div-02").removeClass("blueHeader");
    }
    if (scroll >= 1500) {
        $(".div-03").addClass("greenHeader");
    } else {
        $(".div-03").removeClass("greenHeader");
    }
});

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

.darkHeader {
  background: black;
}
.blueHeader {
  background: blue;
}
.greenHeader {
  background: green;
}

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