// 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(){
console.log("hi");
var activeNav = document.getElementsByClassName("nav-active"); console.log(active-nav); });