jQuery: выделить nav, когда div прокручивается в поле зрения

Question

У меня есть простая боковая навигация круговых div, щелкнув по одному прокручивающему вас до соответствующего .block div, все это работает отлично. Теперь, хотя мне интересно, можно ли выделить соответствующий .nav-item div, в зависимости от которого находится .block div.
, например. если появится #block-3, будет выделен .nav-item div с data-hook="3"background-color: blue.

jsFiddle демо: http://jsfiddle.net/rf4Ea/3/

HTML:

<div id="block-one" class="block"></div> 
<div id="block-two" class="block"></div> 
<div id="block-three" class="block"></div> 
<div id="block-four" class="block"></div> 
<div id="block-five" class="block"></div> 

<ul class="nav-wrap"> 
    <li class="nav-item" data-hook="one"></li> 
    <li class="nav-item" data-hook="two"></li> 
    <li class="nav-item" data-hook="three"></li> 
    <li class="nav-item" data-hook="four"></li> 
    <li class="nav-item" data-hook="five"></li> 
</ul> 

JQuery:

$(document).ready(function() { 

    Resize(); 
}); 

//Every resize of window 
$(window).resize(function() { 
    Resize(); 
}); 

//Dynamically assign height 
function Resize() { 
    // Handler for .ready() called. 
    var divwid = $(window).height()/2, 
     navhei = $('.nav-wrap').height()/2, 
     newhei = divwid - navhei; 
    $('.nav-wrap').css({ 
     'top': newhei 
    }); 

} 


$('.nav-item').click(function() { 
    $('html, body').animate({ 
     scrollTop: $('#block-' + $(this).attr('data-hook')).offset().top - 0 
    }, "slow"); 
}); 

Если это вообще возможно? Любые предложения будут ценны!

Answer 1

Добавление класса, выбранного в вашем CSS так:

.nav-item:hover, .nav-item.selected { 
    background-color: blue; 
} 

Вы можете связать функцию на событие прокрутки, чтобы изменить цвет текущей СЧА пункта:

function hoverCurrentItem() { 
    var h = $(".block:first").height(); 
    var sIndex = Math.floor($(window).scrollTop()/h); 
    var $sItem = $(".nav-item").eq(sIndex); 
    if (!$sItem.hasClass("selected")) { 
     $(".selected").removeClass("selected"); 
     $sItem.addClass("selected"); 
    }  
} 
hoverCurrentItem(); 

$(window).scroll(function(e) { 
    hoverCurrentItem() 
}); 

Посмотреть в JsFiddle