当使用jquery从窗口顶部到达200px时，如何更改div的类？

我在一个网页上有5个框，你可以在这里看到：

第一个框的文本01为黄色背景色，第二个框的文本02、03等为灰色背景色

---

滚动窗口时，如何在其他框到达窗口顶部下方200px的点处（一个接一个）更改其背景色？

您需要检查-每当滚动窗口时-是否有任何元素从视口顶部小于

200px

要确定每个元素相对于视口的垂直偏移位置，可以从每个元素相对于文档的垂直偏移位置（

.offset（）.top

）中减去窗口垂直滚动位置（

$（window）.scrollTop

）

例如，

var offset反对派=$（元素）.offset（）.top-$（窗口）.scrollTop（）

工作示例：


$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
$（'div'）。每个（函数（）{
var offset反对派=$（this.offset（）.top-$（window.scrollTop（）；
如果（偏移小于100）{
$（this.addClass（'active'）；
}
如果（偏移量>100）{
$（this.removeClass（'active'）；
}
});
});
});
div{
宽度：36px；
高度：36px；
线高：36px；
边缘底部：200px；
颜色：rgb（0,0,0）；
背景色：rgb（191）；
字体大小：24px；
字体大小：粗体；
文本对齐：居中；
}
.主动{
背景颜色：黄色；
}

1.
2.
3.
4.
5
您可以将offset（）与$（window）.scrollTop（）结合使用来确定元素的位置

    $('.box').each(function( index ) {
        var threshold = 200;
        var topOffset = $( this ).offset().top;
        if( topOffset - $(window).scrollTop() < threshold){
            $( this ).addClass('active');
       }else{
           $( this ).removeClass('active');
        }
    });

$（'.box'）。每个（函数（索引）{
var阈值=200；
var topOffset=$（this）.offset（）.top；
if（topOffset-$（窗口）.scrollTop（）<阈值）{
$（this.addClass（'active'）；
}否则{
$（this.removeClass（'active'）；
}
});

请参见此处的工作示例：
很好，当第一个盒子到达顶部时，是否可以更改第二个盒子的背景颜色，当第二个盒子到达顶部时，是否可以更改第三个盒子的背景颜色，其他盒子是否可以更改相同的颜色？我是通过复杂的方式完成的。你可以在这里看到（）。我想要简单的代码-我相信您理解必须编写自己的代码。您可以使用此网站寻求方法。这不是人们为你做家庭作业的地方。在上面的解决方案中，您有足够的资源来编写自己的解决方案。你能做到。祝你好运！很好，当第一个盒子到达顶部时，是否可以更改第二个盒子的bgcolor，当第二个盒子到达顶部时，是否可以更改第三个盒子的bgcolor，以及其他盒子的bgcolor？当然，我已经更新了JSFIDLE以更改下一个盒子的颜色。。。可以在if/else块中添加所需的所有内容，以定位下一个或上一个块。您也可以单独通过CSS来完成。只需确保CSS中的类顺序正确，这样“active”类的优先级总是高于“nextractive”类