javascript - jQuery:当 div 滚动到 View 中时突出显示导航

Question

我有一个简单的圆形 div 侧面导航，单击一个可以将您滚动到相关的 .block div，这一切都很好。现在，尽管我想知道是否可以突出显示相关的 .nav-item div，具体取决于 View 中的 .block div。
例如如果 #block-3 进入视野，相关的 .nav-item 与 data-hook="3" 将突出显示 背景颜色:蓝色。

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;
}

您可以在滚动事件上绑定(bind)一个函数来更改当前导航项的颜色:

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