Ответ 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/