Continued nav bar animation developement

JQFuncs.js

@@ -1,11 +1,10 @@
 // Scroll smoothly between html anchors
 // Taken from: http://codepen.io/mattsince87/pen/exByn
 
-function updateMagicLine($el, $magicLine) {
-
-    topPos = $el.position().top;
-    newHeight = $el.parent().outerHeight();
-    $magicLine.animate({
+function updateMagicLine($li, $magicLine) {
+    topPos = $li.position().top;
+    newHeight = $li.parent().outerHeight();
+    $magicLine.stop().animate({
         top: topPos,
         height : newHeight
     });
@@ -17,21 +16,17 @@ function scrollNav() {
         leftPos, 
         newWidth, 
         $mainNav = $("#navLinks");
-
+    //Add a list item to the navigation to act as the highlight bar
     $mainNav.append("<li id='magic-line'></li>");
     var $magicLine = $("#magic-line");
 
     $magicLine
-        .height($(".active").height())
+        .height($(".active").outerHeight())
         .css("top", $(".active a").position().top)
-        .data("origLeft", $magicLine.position().top)
-        .data("origHeight", $magicLine.height());
+        .data("origLeft", $magicLine.position().left)
+        .data("origHeight", $magicLine.outerHeight());
 
     $("#navLinks li a").click(function() {
-        updateMagicLine($(this), $magicLine);
-    });
-
-    $('.nav a').click(function(){  
         //Toggle Class
         $(".active").removeClass("active");      
         $(this).closest('li').addClass("active");
@@ -41,6 +36,7 @@ function scrollNav() {
         $('html, body').stop().animate({
             scrollTop: $( $(this).attr('href') ).offset().top 
         }, 400);
+        updateMagicLine($(this), $magicLine);
         return false;
     });
     $('.scrollTop a').scrollTop();
@@ -50,6 +46,7 @@ function scrollNav() {
      * We use the scroll functionality again, some array creation and 
      * manipulation, class adding and class removing, and conditional testing
      */
+    var prevDivPos = null;
     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++) {    
@@ -60,16 +57,20 @@ function scrollNav() {
     
     $(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();
+        var windowHeight = $(window).outerHeight(); // get the height of the window
+        var docHeight = $(document).outerHeight();
         
         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)) {
+            if (windowPos + (windowHeight / 3)>= divPos && windowPos + (windowHeight / 3) < (divPos + divHeight)) {
                 $("a[href='" + theID + "']").closest('li').addClass("active");
-                updateMagicLine($("a[href='" + theID + "']"), $magicLine);
+                if (divPos != prevDivPos) {
+                    console.log(divPos, prevDivPos);
+                    updateMagicLine($(".active a"), $magicLine);
+                    prevDivPos = divPos;
+                }
             } else {
                 $("a[href='" + theID + "']").closest('li').removeClass("active");
             }

Session.vim

@@ -8,9 +8,9 @@ if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
   let s:wipebuf = bufnr('%')
 endif
 set shortmess=aoO
-badd +144 index.htm
-badd +40 JQFuncs.js
-badd +15 style.css
+badd +166 index.htm
+badd +7 JQFuncs.js
+badd +128 style.css
 argglobal
 silent! argdel *
 argadd index.htm
@@ -33,12 +33,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 61 - ((12 * winheight(0) + 23) / 46)
+let s:l = 1 - ((0 * winheight(0) + 23) / 46)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-61
-normal! 029|
+1
+normal! 0
 tabnext 1
 if exists('s:wipebuf')
   silent exe 'bwipe ' . s:wipebuf

index.htm

@@ -165,10 +165,15 @@
                 <h2>Portfolio</h2>
                 <p>Summary of portfolio</p>
                 <h4>Audio descriptor framework</h4>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                 <h4>Python/matlab filter module</h4>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                 <h4>VSTi Synth</h4>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                 <h4>VST Delay effect</h4>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
                 <h4>This Website</h4>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
             </article>
 
             <footer>