Difference between revisions of "Team:DTU-Denmark/sidebar-js"

(Undo revision 108262 by Mikk936a (talk))
Line 56: Line 56:
  
 
             }
 
             }
 +
        });
 +
 +
        $(window).scroll(function(){
 +
            var active-nav = document.getElementsByClass("nav-active")
 +
            console.log(active-nav)
 
         });
 
         });

Revision as of 09:03, 17 October 2016

// The affix elements javascript 

       window.onload = function (){
           $('#sidebar').affix({
               offset: {
                   // top: determines how far to scroll before applying .affixed class
                   top: function () {
                       var offsetTop = $('#sidebar').offset().top           // How far are we from top in total?
                       //var navOuterHeight = $('.navbar').outerHeight(true) || 0  // If the navbar is fixed account for it
                       //var bodyPaddingTop = parseInt($(document.body).css("padding-top"), 10) || 0  // or use body padding instead
                       return (this.top = offsetTop - 140)
                   }
                   , bottom: function () {
                       var footHight = document.getElementById("footer").offsetHeight;
                       return (this.bottom = footHight + 20) || 0
                   }
               }
           })
       }



       /**
        * 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 = $('#sidebar 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() + 125; // 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).parent().height(); // get the height of the div in question
               if (windowPos >= divPos) {
                   $("a[href='" + theID + "']").addClass("nav-active");
               } 

               if (windowPos > (divPos + divHeight)) {
                   $("a[href='" + theID + "']").removeClass("nav-active");
               }

               if (windowPos < divPos) {
                   $("a[href='" + theID + "']").removeClass("nav-active");
               }

           }
       });

       $(window).scroll(function(){
           var active-nav = document.getElementsByClass("nav-active")
           console.log(active-nav) 
       });