Javascript 如何在jQuery中获取屏幕上可见的元素对象？

我在DOM中有一个对象列表，它比屏幕高度区域长

我只需要检测屏幕上可见的对象，就可以创建类似于时间轴树视图的东西。（如下图所示）：

我的DOM如下所示：

<!-- elements visibility on screen to be DETECTED -->
<div id="elements">
    <div id="elem-1">Lorem ipsum</div>
    <div id="elem-2">Lorem ipsum</div>
    <div id="elem-3">Lorem ipsum</div>
    <div id="elem-4">Lorem ipsum</div>
    <div id="elem-5">Lorem ipsum</div>
    <div id="elem-6">Lorem ipsum</div>
    <div id="elem-7">Lorem ipsum</div>
    <div id="elem-8">Lorem ipsum</div>
</div>


<!--elements visibility on screen to be AFFECTED  -->
<ul id="timeline">
    <li view-id="elem-1">Elem-1</li>
    <li view-id="elem-2">Elem-2</li>
    <li view-id="elem-3" class="active">Elem-3</li>
    <li view-id="elem-4" class="active">Elem-4</li>
    <li view-id="elem-5" class="active">Elem-5</li>
    <li view-id="elem-6" class="active">Elem-6</li>
    <li view-id="elem-7">Elem-7</li>
    <li view-id="elem-8">Elem-8</li>
</ul>

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文

elem-1
elem-2
elem-3
elem-4
elem-5
elem-6
elem-7
elem-8

我的目标是检测

#elements

容器中屏幕可见元素的ID，并将

active

类分配给

#timeline

容器中的相应元素

我需要在

Scroll

事件上执行此过程

---

如何实现这一点有什么想法吗？

首先，屏幕上的可见区域被称为

视口

（图像取自作品，在Photoshop中清除并编辑）

---

因此，您只需检测

视口中的所有元素

这可以通过使用许多jQuery插件来实现，但我将在一个示例中向您解释，这个示例称为
jquerywithinviewport

链接到以下内容的源代码和文档：


步骤1：
下载插件并将
jQuery
framework和
withinviewport
插件包含在脚本中：

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>


步骤3：
使用
withinviewport
选择器获取视口中的所有元素，并按每个元素将类添加到
#timeline
容器中的相应列表项：

$("#elements > div").withinviewport().each(function() {
   $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});

步骤4：
综合起来：

$(window).bind("scroll", function() {

    //clear all active class
    $('#timeline > li').removeClass('active');

    //add active class to timeline
    $("#elements > div").withinviewport().each(function() {
         $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
    });
});




这个插件还提供了设置视图端口顶部、底部、左侧和右侧偏移的机会

请参见此处的演示：
您需要迭代每个元素，并将其
顶部
与文档的
滚动顶部
进行比较，将
底部
与文档的
滚动顶部+高度
进行比较。您可以使用此问题，而不是重复的，其他链接问题需要知道元素是否在视图中，这个人想知道许多元素中的哪一个是ViewPort中第一个可见的元素请解释“执行”和使用插件之间的区别？我很想知道。另外，请告诉我OP说我不想使用plugin@musefan我在不同的论坛上有相同的答案，只是复制了大部分。只有我拍了Punto的照片，并在photoshop中迅速清理干净。@zur4ik，非常清楚地说：Punto到目前为止只问了两个问题，你两个都回答了（你的答案都被接受了）。他只回答了你的一个问题，你接受了。巧合时有发生，但这看起来有点太多了。@zur4ik：听着，老实说，你和OP（假设你不是两个客户）决定聚在一起发表这篇文章。我个人对回答你的“自己的问题”没有问题，把它作为参考点也不是问题，因为它可以帮助其他访问者。不过，我争论的是，这是一个重复的问题，我认为这个问题不应该存在，因为这个原因（它也没有显示出在提问之前解决问题的任何努力），我不明白出了什么问题。我有同样的内容，只是复制/粘贴的问题。我刚在Photoshop中修改了图片。我认为不可能在3分钟内回答内容丰富的问题。
$(window).bind("scroll", function() {

    //clear all active class
    $('#timeline > li').removeClass('active');

    //add active class to timeline
    $("#elements > div").withinviewport().each(function() {
         $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
    });
});