我有一个简单的圆形div导航,点击一个滚动你到相关的.block
div,这一切都很好。现在虽然我想知道是否可以突出显示相关的.nav-item
div,取决于哪个.block
div在视图中。
例如如果#block-3
进入视野,则.nav-item
与[{1}}相关的data-hook="3"
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");
});
如果可能的话?任何建议将不胜感激!
答案 0 :(得分:2)
添加在css中选择的类:
.nav-item:hover, .nav-item.selected {
background-color: blue;
}
您可以在scroll事件上绑定一个函数来更改当前导航项的颜色:
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()
});
中查看