jQuery：高亮导航当div滚动查看

Question

我有一个简单的圆形div的侧面导航，点击一个滚动到相关的.block股利，这一切工作得很好。现在，虽然我想知道是否有可能突出显示相关的.nav-item股利，这取决于哪一个股利在看。
例如如果#block-3进入视野，与data-hook="3"相关的.nav-item div将突出显示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