Jquery 检查具有类的元素在视口中是否可见

我试图检测一个类当前是否在视口中可见。我正在使用这个（无法获得对我问题的答复）。最初的帖子使用ID而不是类，我将其更改为检测一个名为

.white section

的类，该类在页面下方重复

目前它只检测到第一个

.white部分

，如何让它在它们进入视口时检测它们

$('#content').scroll(function() {
    var top_of_element = $(".white-section").offset().top;
    var bottom_of_element = $(".white-section").offset().top + $(".white-section").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).height();
    var top_of_screen = $(window).scrollTop();

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
         $('.header-container').addClass('.alt-menu');
    }
    else {
        $('.header-container').removeClass('.alt-menu');
    }
});

$（'#content'）。滚动（函数（）{
var top\u of_元素=$（“.white section”）.offset（）.top；
变量bottom\u of_元素=$（“.white section”）.offset（）.top+$（“.white section”）.outerHeight（）；
var bottom_of_screen=$（窗口）.scrollTop（）+$（窗口）.height（）；
var top\u of_screen=$（window.scrollTop（）；
if（（屏幕底部>元素顶部）&&（屏幕顶部<元素底部））{
$（'.header-container'）.addClass（'.alt-menu'）；
}
否则{
$（'.header-container'）.removeClass（'.alt-menu'）；
}
});

以下是html的设置方式：

<div class="header-container"></div>

<div class="white-section"></div>
<div class="white-section"></div>
<div class="white-section"></div>
<div class="white-section"></div>
<div class="white-section"></div>

---

试试下面的方法。它在元素上循环以尝试查找与条件匹配的任何元素，如果有，则添加该类。我还为解决方案添加了一些微调，并缓存了查找，以便滚动事件更快

（函数（$）{
var scrollingIsThrottled=false；
var$allWhiteSections=$（“.whitesection”）；
变量$window=$（window）；
变量$headerContainer=$（'.header-container'）；
$（'#content'）。滚动（函数（）{
如果（！scrollingIsThrottled）{
scrollingIsThrottled=true；
var$whiteSpaceMatchingExpression=$allWhiteSections.filter（函数（）{
var$this=$（this）；
var top\u of_元素=$this.offset（）.top；
var bottom\u of_元素=$this.offset（）.top+$this.outerHeight（）；
var bottom_of_screen=$window.scrollTop（）+$window.height（）；
var top\u of_screen=$window.scrollTop（）；
返回（（屏幕底部>元素顶部）&&（屏幕顶部<元素底部））；
});
if（$whiteSpaceMatchingExpression.length）{
$headerContainer.addClass（'alt-menu'）；
}否则{
$headerContainer.removeClass（'alt-menu'）；
}
scrollingIsThrottled=false；
}
});
}（jQuery））白色部分与标题容器的关系如何？我最初的想法是，这将涉及一个白色部分上的每个部分。@Taplar抱歉，我应该清楚这一点。当我滚动到一个白色部分时，它会向标题容器添加一个类，当它不在白色部分时会将其删除，因此标题容器是白色部分的子容器？请看。下面是一个示例，那么页面上是否只有一个标题容器？