Как получить видимые объекты на экране в 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 и назначить класс active соответствующим элементам в контейнере #timeline.

Мне нужно выполнить этот процесс в событии Scroll.

Любые идеи, как достичь этого?

Ответ 1

Прежде всего on-screen visible area известен как Viewport.

(изображение взято из OP. Очищено и отредактировано в Photoshop)

Итак, все, что вам нужно, - это обнаружить все элементы в Viewport.

Это может быть достигнуто с помощью многих плагинов для jQuery, но я объясню вам на одном примере, который называется jQuery withinviewport

Ссылка на источник и документацию на: [withInViewport - Github]

Шаг 1:

Загрузите плагины и включите фреймворк jQuery и плагин withinviewport в script:

<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/

Ответ 2

Лучший и простой способ сделать это с помощью этого плагина:

http://www.appelsiini.net/projects/viewport

В противном случае, я думаю, вы будете смотреть на большую работу.