Adds navigation highlighting of current view

All h1 and h2 elements, that are in the current viewport
will trigger adding an .active class to the corresponding
entry in the navigation.

_layouts/default.html

@@ -85,5 +85,6 @@
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
         <script src="/scripts/setup.js"></script>
+        <script src="/scripts/navhighlight.js"></script>
     </body>
 </html>

scripts/navhighlight.js

@@ -0,0 +1,28 @@
+(function ($) {
+	$(window).scroll(function() {
+		//console.log("They see me scrollin, they hatin");
+
+		//clear highlighting
+		$('a').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
+		$('h1, h2').each(function(i,e) {
+				//get element position;
+				var eTop = $(e).offset().top;
+				var eBottom = eTop + $(e).height();
+				if (eTop >= viewTop) {
+					if (eBottom <= viewBottom) {
+						$('a[href="#'+e.id+'"]').addClass("active");
+					} else {
+						console.log("Start skipping test with "+e.id);
+						return false;
+					}
+				}
+		});
+	});
+})(jQuery);

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;