Almost finished nav highlight dynamically following scrolling

JQFuncs.js

@@ -1,6 +1,7 @@
 // Scroll smoothly between html anchors
 // Taken from: http://codepen.io/mattsince87/pen/exByn
 function scrollNav() {
+    
     $('.nav a').click(function(){  
         //Toggle Class
         $(".active").removeClass("active");      
@@ -9,11 +10,49 @@ function scrollNav() {
         $('.'+theClass).parent('li').addClass('active');
         //Animate
         $('html, body').stop().animate({
-            scrollTop: $( $(this).attr('href') ).offset().top - 160
+            scrollTop: $( $(this).attr('href') ).offset().top 
         }, 400);
         return false;
     });
     $('.scrollTop a').scrollTop();
+
+    /**
+     * This part handles the highlighting functionality.
+     * We use the scroll functionality again, some array creation and 
+     * manipulation, class adding and class removing, and conditional testing
+     */
+    var aChildren = $("nav li").children(); // find the a children of the list items
+    var aArray = []; // create the empty aArray
+    for (var i=0; i < aChildren.length; i++) {    
+        var aChild = aChildren[i];
+        var ahref = $(aChild).attr('href');
+        aArray.push(ahref);
+    } // this for loop fills the aArray with attribute href values
+    
+    $(window).scroll(function(){
+        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
+        var windowHeight = $(window).height(); // get the height of the window
+        var docHeight = $(document).height();
+        
+        for (var i=0; i < aArray.length; i++) {
+            var theID = aArray[i];
+            var divPos = $(theID).offset().top; // get the offset of the div from the top of page
+            var divHeight = $(theID).outerHeight(); // get the height of the div in question
+            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
+                $("a[href='" + theID + "']").closest('li').addClass("active");
+            } else {
+                $("a[href='" + theID + "']").closest('li').removeClass("active");
+            }
+        }
+        
+        if(windowPos + windowHeight == docHeight) {
+            if (!$("nav li:last-child a").hasClass("nav-active")) {
+                var navActiveCurrent = $(".nav-active").attr("href");
+                $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
+                $("nav li:last-child a").addClass("nav-active");
+            }
+        }
+    });
 }
 
 //Toggle smoothly revealing/hiding divs
@@ -25,10 +64,34 @@ function showHide() {
 }
 
 function highlightDiv() {
+    var $el, 
+        leftPos, 
+        newWidth, 
+        $mainNav = $("#navLinks");
+
+    $mainNav.append("<li id='magic-line'></li>");
+    var $magicLine = $("#magic-line");
+
+    $magicLine
+        .height($(".active").height())
+        .css("top", $(".active a").position().top)
+        .data("origLeft", $magicLine.position().top)
+        .data("origHeight", $magicLine.height());
+
+    $("#navLinks li a").click(function() {
+        $el = $(this);
+        topPos = $el.position().top;
+        newHeight = $el.parent().height();
+        $magicLine.animate({
+            top: topPos,
+            height : newHeight
+        });
+    });
 }
 
 //Make sure document is ready before executing javascript
-$(document).ready(function(){
+$(document).ready(function() {
     scrollNav();
     showHide();
+    highlightDiv();
 });

Session.vim

@@ -8,22 +8,22 @@ if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
   let s:wipebuf = bufnr('%')
 endif
 set shortmess=aoO
-badd +40 index.htm
-badd +28 SmoothScroll.js
-badd +81 style.css
+badd +144 index.htm
+badd +40 JQFuncs.js
+badd +15 style.css
 argglobal
 silent! argdel *
 argadd index.htm
-argadd mainstyle.css
-argadd SmoothScroll.js
-edit SmoothScroll.js
+argadd JQFuncs.js
+argadd style.css
+edit JQFuncs.js
 set splitbelow splitright
 set nosplitbelow
 set nosplitright
 wincmd t
 set winheight=1 winwidth=1
 argglobal
-edit SmoothScroll.js
+edit JQFuncs.js
 setlocal fdm=manual
 setlocal fde=0
 setlocal fmr={{{,}}}
@@ -33,11 +33,11 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 25 - ((14 * winheight(0) + 11) / 23)
+let s:l = 1 - ((0 * winheight(0) + 23) / 46)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-25
+1
 normal! 0
 tabnext 1
 if exists('s:wipebuf')

index.htm

@@ -6,7 +6,7 @@
         <link href="normalize.css" rel="stylesheet">
         <link href="style.css" rel="stylesheet">
         <script src="jquery-1.11.3.js" type="text/javascript"></script>
-        <script src="SmoothScroll.js" type="text/javascript"></script>
+        <script src="JQFuncs.js" type="text/javascript"></script>
     </head>
 
     <body>
@@ -15,7 +15,7 @@
             <div id="imgDiv">
                 <img id="profilePic" class="circular" src="resources/ProfilePic.jpg" alt="Profile Picture">
             </div>
-            <ul>
+            <ul id="navLinks">
                 <li class="active">
                     <a id="link1" href="#aboutMe" class="nav-aboutMe">About Me</a>
                 </li>
@@ -33,9 +33,8 @@
                 <h1>Sam Perry</h1>
             </header>
 
-
-            <article>
-                <h2 id="aboutMe">About Me</h2>
+            <article id="aboutMe" >
+                <h2 class="anchor">About Me</h2>
                 <p>
                     Hi! I'm Sam. An aspiring programmer/DSP engineer. I made this website to show some of the projects that 
                     I've completed or am currently working on and as a place to document some of my key skills and interests. 
@@ -141,7 +140,7 @@
                 </div>
             </article>
 
-            <article id="profExper">
+            <article id="profExper" class="anchor">
                 <h2>Professional Experience</h2>
                 <p>Summary of professional experience </p>
                 <div id="ircam">
@@ -162,7 +161,7 @@
                 </div>
             </article>
 
-            <article id="portfolio">
+            <article id="portfolio" class="anchor">
                 <h2>Portfolio</h2>
                 <p>Summary of portfolio</p>
                 <h4>Audio descriptor framework</h4>

style.css

@@ -9,6 +9,11 @@ h5 {
     background-color: LightGray;
 }
 
+article {
+    margin: 0;
+    padding: 0;
+}
+
 header {
     height: 30em;
     width: 100%;
@@ -48,13 +53,13 @@ nav > ul {
     margin: 0
 }
 
-nav > ul > li {
+nav > ul > li > a {
     padding: 0.5em 2em;
-    list-style-type: none;
+    display: block;
 }
 
-nav > ul > li.active {
-    background-color: #8565B8
+nav > ul > li {
+    list-style-type: none;
 }
 
 div#maincontent {
@@ -118,3 +123,10 @@ a:active {
     text-decoration: none;
 }
 
+#magic-line {
+    width: 100%;
+    position: absolute;
+    background: #8565B8;
+    z-index: -1;
+}
+