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

Question

我正在处理布局，您可以使用下面的链接直观地想象一下:

Layout

固定 header 是一个带有position: fixed 的div。这意味着，滚动过程隐藏了它下面的元素(这就是为什么它在我的图像上是透明的，以供说明)。我需要跟踪页面上垂直顶部元素(其他 div)的列表，这些元素仍然可见。使用我的布局示例，我需要一个 red 元素列表。它们可以以任何方式定位。

预期结果是 JavaScript 函数，它返回一个元素数组。在幕后，该解决方案绝对应该跟踪 window.onScroll 事件，并以某种方式有效地保持以最快的方式获取结果的能力。

Answer 1

如果所有红色 div 都属于同一个父级，您可以这样做:

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

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

    });
})

1. 这将在每次滚动页面时运行，然后遍历父 div 的子元素(这是昂贵的，但如果您动态地将元素添加到页面，那么这也可以通过稍微调整来实现)。
2. 检查每个 child 的底部位置并将其与固定标题的底部位置(top + outerHeight)进行比较，如果为真，则元素底部小于标题的底部，因此在标题下方。
3. 之后按照您的意愿进行操作，如果您愿意，可以将他们的 Jquery 引用添加到一个数组中。