Если в окне просмотра; изменить цвет границы

Question

У меня есть разные divs и menuebar, которые составляют LI-элементы.

Названия div: # сначала # 4.

Если один из DIV (или больше) есть/находится в окне просмотра, я хочу изменить цвет нижней границы для li-элемента, который ссылается на этот DIV.

Например: Если DIV # третье находится в видовом экране, третий элемент LI (# nav3) должен изменить его нижнюю границу на зеленый. Если он покинет окно просмотра, он должен снова измениться на белый.

• Только что время DIV находится в окне просмотра. Как только он покинет область просмотра, я хочу отменить изменение цвета.

Я попробовал его с JQuery Viewport: http://www.appelsiini.net/projects/viewport

Моя проблема в том, что я не могу понять, как использовать этот селектор - Я знаю, что это основной материал, но я действительно не могу понять это.

$("#third:in-viewport").each(function() { 
    $("#nav1, #nav2, #nav4").animate({ borderBottomColor: '#fff' },800); 
    $("#nav3").animate({ borderBottomColor: 'green' },800); 
}); 

Было бы здорово, если бы кто-нибудь мог мне помочь в этом. Большое спасибо!

Answer 1

Я хотел бы добавить класс к вашим DIVs, что-то вроде:

<div id="first" class="item"> // Your code <div> 
<div id="second" class="item"> // Your code <div> 
<div id="third" class="item"> // Your code <div> 
<div id="fourth" class="item"> // Your code <div> 

А потом что-то вроде этого в JQuery, чтобы выделить ссылки:

$(".item:in-viewport").each(function() { 
    var item_id = $(this).attr("id"); 
    // In viewport 
    $("a[href=#" + item_id +"]").animate({ borderBottomColor: 'green' },800);  
    // Not in viewport 
    $("a").not("a[href=#" + item_id +"]").animate({ borderBottomColor: '#fff' },800); 
});