如何在jQuery中获取屏幕上可见的元素对象？ [英] How to get on-screen visible element objects in jQuery?

问题描述

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

I have a list of objects in DOM, which is longer than screen height area.

我需要检测屏幕上的可见对象，树视图。 （如下图所示）：

I need to detect on-screen visible objects only to make something like timeline tree-view. (something like on the picture below):

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

我的目标是检测＃元素容器并将活动类指定给 #timeline 容器中的相应元素。

My goal is to detect IDs' of on-screen visible elements from #elements container and assign active class to corresponding elements in #timeline container.

我需要在滚动事件上执行此过程。

I need to do this process on Scroll event.

任何想法如何实现这一点？

Any ideas how to achieve this?

推荐答案

首先屏幕可见区域被称为视口。

取自OP。在 Photoshop 中清除并编辑）

(image is taken from OP. Cleared and edited in Photoshop)

---

所以你需要的是检测 Viewport 中的所有元素。

这可以通过使用jQuery的许多插件来实现，但是我将在一个示例中解释，它被称为 jQuery withinviewport

This can be achieved using many plugins for jQuery, but I'll explain you on one example, which is called as jQuery withinviewport

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

Link to source and documentation on: [ withInViewport - Github ]

在您的脚本中下载插件并添加 jQuery 框架和 withinviewport ：

Download plugins and include jQuery framework and withinviewport plugin in your script:

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

。

上的初始化函数事件：

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

。

使用 withinviewport 选择器来获取Viewport中的所有元素和每个元素将类添加到 #timeline 容器：

Use withinviewport selector to get all elements in you Viewport and by each element add class to corresponding list-item in your #timeline container:

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

步骤4：

：

Step 4:

Put all together:

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

。

。

此插件还提供了设置view-port的顶部，底部，左右偏移量的机会。

Also this plugin gives you opportunity to set top, bottom, left and right offset for view-port.

参见此处的演示： http：// patik.com/code/within-viewport/

这篇关于如何在jQuery中获取屏幕上可见的元素对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！