Javascript 在固定标题下跟踪顶部可见div列表的最快方法是什么？

我正在设计布局，您可以通过下面的链接直观地想象：

Fixed header是一个带有

位置的div:Fixed

。这意味着，滚动过程隐藏了它下面的元素（这就是为什么它在我的图像上是透明的，以便于说明）。我需要跟踪页面上垂直顶部元素（其他div）的列表，这些元素仍然可见。使用我的布局示例，我需要一个

red

元素列表。它们可以以任何方式定位

---

预期结果是JavaScript函数，它返回一个元素数组。在幕后，解决方案应该明确跟踪

window.onScroll

事件，并以某种方式有效地保持以最快的方式获取结果的能力。

如果所有红色div都属于同一父级，则可以执行以下操作：

$(window).scroll(function() {
    $('#parentDiv').children().each(function () {

        if($(this).position().top + $(this).outerHeight() < $("#parentDiv").position().top + $("#parentDiv").outerHeight()) {
             // add them to array
        }

    });
})

$（窗口）。滚动（函数（）{
$（'#parentDiv'）.children（）.each（函数（）{
if（$（this）.position（）.top+$（this）.outerHeight（）<$（“#parentDiv”）.position（）.top+$（“#parentDiv”）.outerHeight（））{
//将它们添加到数组中
}
});
})

这将在每次滚动页面时运行，然后遍历父div的子div（这是非常昂贵的，但是如果您动态地向页面添加元素，那么这也会稍微调整）

检查每个子元素的底部位置，并将其与固定收割台的底部位置（顶部+外侧）进行比较，如果为true，则元素底部小于收割台底部，因此位于收割台下方

在这之后，您可以随心所欲地将它们的Jquery引用添加到数组中

---

我创建了函数

getDivs

，它将返回带有特定div的jQuery对象

您可以将函数中的

$allDivs

变量编辑为任何要检查的jQuery对象

请检查下面我的代码片段：

var
$allDivs=$（'#container>.column>div'），//要检查的div
$header=$（“#header”）；
函数getDivs（）{
返回$allDivs
.filter（函数（）{
变量
$this=$（this），
top=parseInt（$this.offset（）.top，10），
bottom=top+this.outerHeight（），
scrTop=$header.offset（）.top+$header.outerHeight（）；
如果（顶部=scrTop）
返回true；
其他的
返回false；
});
}
$allDivs.removeClass（'under'）；
getDivs（）
.addClass（“下”）；
$（窗口）。滚动（函数（）{
$allDivs.removeClass（'under'）；
getDivs（）
.addClass（“下”）；
})

正文{
高度：1300px；
}
#标题{
宽度：100%；
填充：50px；
框大小：边框框；
位置：固定；
顶部：0px；
左：0px；
背景：rgba（0,0,0,0.3）；
}
.栏目{
浮动：左；
显示器：flex；
柔性流：柱包裹；
调整内容：灵活启动；
调整项目：灵活启动；
调整内容：灵活启动；
}
.column>div{
高度：100px；
宽度：100px；
边框：1px纯绿色；
弹性：1100像素；
}
#col1{margin:100px 0；}
#col3{margin:30px 0；}
#col1>div{flex:175px；}
#col2>div{flex:1200px；}
.在{背景：红色；}

标题