如何在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> 我的目标是从#elements容器中检测屏幕上可见元素的ID，并将active类分配给#timeline容器中的相应元素。
我需要在Scroll事件上做这个过程。
任何想法如何实现这一目标？
首先on-screen visible area被称为Viewport 。
（图像取自OP。在Photoshop中清除并编辑）
所以你只需要检测你的Viewport所有元素。
这可以使用jQuery的许多插件来实现，但是我将在一个例子中解释你，它被称为jQuery withinviewport
链接到源代码和文档： [withInViewport – Github]
步骤1：
下载插件，并在脚本中包含jQuery框架和withinviewport插件：
<script src="jquery-1.7.min.js"></script> <script src="withinViewport.js"></script> <script src="jquery.withinviewport.js"></script>
。
第2步：
scroll事件初始化function：
$(window).bind("scroll", function() { //your code placeholder });
。
第3步：
使用withinviewportselect器来获取你的所有元素视口和每个元素添加类到相应的list-item在你的#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'); }); });
。
。
此外，这个插件为您提供机会来设置视图端口的顶部，底部，左侧和右侧偏移量。
在此处查看演示 ： http : //patik.com/code/within-viewport/
