diff --git a/scripts/setup.js b/scripts/setup.js index cbab838..49695dc 100644 --- a/scripts/setup.js +++ b/scripts/setup.js @@ -24,3 +24,56 @@ }).fail(fail); } })(jQuery); + +(function ($) { + //Add current view's highlighting to the navigation + + /** helper for highlighting */ + function highlightNav(navLinks,id) + { + navLinks.filter('[href="/#'+id+'"]').addClass("active"); + } + + $(window).scroll(function() { + //console.log("They see me scrollin, they hatin"); + + //clear highlighting + var navLinks = $('.site-navigation a'); + navLinks.removeClass("active"); + + //calc current viewport + var viewTop = $(window).scrollTop(); + var viewBottom = viewTop + $(window).height(); + + //for all h1 and h2 elements, check if they are visible + //performance tweak: stop each() after the first element is found to be behind view + var previous = ""; + var foundOne = false; + var fallback = ""; + $('h1, h2').each(function(i,e) { + //get element position; + var eTop = $(e).offset().top; + var eBottom = eTop + $(e).height(); + var id=e.id; + + if (eTop >= viewTop) { + //if we are passed the view and no heading was highlighted yet, store previous one as fallback + if (! foundOne) { + fallback=previous; + } + if (eBottom <= viewBottom) { + highlightNav(navLinks, id); + foundOne = true; + } else { + return false; //break the each(), the rest is below + } + } + previous=id; + }); + //no h1/h2 is in the viewport, so highlight the last one above + if (! foundOne) { + highlightNav(navLinks, fallback); + } + }); +})(jQuery); + diff --git a/styles/site/site-navigation.less b/styles/site/site-navigation.less index 20f9fd4..4f59179 100644 --- a/styles/site/site-navigation.less +++ b/styles/site/site-navigation.less @@ -30,6 +30,9 @@ text-decoration: none; } } +.site-navigation a.active{ + background-color: #ff9; +} .site-navigation ul ul{ .mls; .pth;