Highlight nav on scroll

Author: tbranyen

index.html

@@ -233,6 +233,7 @@ <h4>Returns:</h4>
   </body>
 
   <script src="api-viewer/bower_components/jquery/dist/jquery.js"></script>
+  <script src="api-viewer/bower_components/underscore/underscore.js"></script>
   <script src="api-viewer/bower_components/combyne/dist/combyne.js"></script>
   <script src="scripts/prism.js"></script>
   <script src="scripts/api.js"></script>

scripts/api.js

@@ -52,12 +52,42 @@
       });
     });
 
+    // Size the navigation bar correctly.
     scrollable.height($("html").innerHeight() - 230);
 
     $(window).on("resize", function() {
       scrollable.height($("html").innerHeight() - 230);
     });
 
+    var windowHeight = $(window).height();
+
+    // Store the url to match against.
+    var elms = $(".about, .inner-content, .inner-block li, h4[id]").each(function() {
+      $(this).data({
+        url: "#" + (this.id || ""),
+        top: $(this).offset().top
+      });
+    });
+
+    var children = listApi.find("a");
+
+    $(document).on("scroll ready", _.throttle(function() {
+      var doc = $(this);
+
+      elms.each(function() {
+        var pos = doc.scrollTop();
+        var el = $(this);
+
+        if (el.data("top") > pos && el.data("top") < pos + (windowHeight / 2)) {
+          children.removeClass("active");
+
+          var active = children.filter("[href='" + el.data("url") + "']");
+
+          active.addClass("active").parents(elms).addClass("active");
+        }
+      });
+    }, 50));
+
     // Highlight the new code blocks.
     Prism.highlightAll();
 

styles/api.css

@@ -139,6 +139,7 @@ ul.api-contents table h3 {
   padding-left: 30px;
   list-style: none;
   border-radius: 4px;
+  padding-right: 30px;
 }
 
 .api-content .inner-block strong.cName,