51

我在 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>

我的目标是从容器中检测屏幕上可见元素的 ID，#elements并将active类分配给容器中的相应元素#timeline。

我需要在Scroll事件中执行此过程。

任何想法如何实现这一目标？

4

1 回答 1

44

首先on-screen visible area被称为Viewport。

图像取自 OP 并在 Photoshop 中清理

（图片取自OP。在Photoshop中清除和编辑）

因此，您只需要检测Viewport.

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

链接到源代码和文档：[withInViewport - Github]

第1步：

下载插件并在脚本中包含jQuery框架和插件：withinviewport

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

.

第2步：

事件初始化函数scroll：

$(window).bind("scroll", function() {
    //your code placeholder
});

.

第 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');
    });
});

.

.

此插件还让您有机会为视口设置顶部、底部、左侧和右侧偏移。

在此处查看演示：http : //patik.com/code/within-viewport/

于 2013-10-21T15:06:40.813 回答