I have implemented a side navigation consisting of circular divs. Clicking on one scrolls you to the corresponding .block div, and everything functions correctly. However, I am now curious if it is feasible to highlight the relevant .nav-item div based on which .block div is currently in view.
For example, if #block-3 becomes visible, the appropriate .nav-item div with data-hook="3" will be highlighted with a background-color: blue.
Check out the jsFiddle demo here: 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");
});
If anyone has any suggestions on how to achieve this effect, your input would be greatly appreciated!