highlightCurrentNavItem.js

var highlightCurrentNavItem = {
    getEachNavItem: function() {
        hrefId: [];
        $('nav li a').each(function() {
        var that = $(this);
        highlightCurrentNavItem.hrefId.push(that.attr('href'));
        });
    },
    scroll: function() {
        var current;
        current = $.map(highlightCurrentNavItem.hrefId, function(a) {
        var height = $(a).height();
        var a = $(a).offset().top - $(window).scrollTop() + height;  // detects what section id you are seeing based on scroll and top top
        if (a >= 0) {    // if its greater than 0 then its the page displaying or a lower page
            return a;
        } else {
            return 999999;  // negative value will be treated as 99999 so we can use the smallest totop number to determine current page
        }
    },
    indexOfSmallest: function(b) {
        return b.indexOf(Math.min.apply(Math, b));
    },
    init: function() {
        $('nav a').css('color','red');  // Set the default color of the menu
        highlightCurrentNavItem.getEachNavItem();  // Gets each item from the nav, grabs its anchor tag and adds to array hrefId

        var page = indexOfSmallest(current);  // get the section that is currently displaying

        page = highlightCurrentNavItem.hrefId[page];
        $('#fixed-nav li a').attr('style','');
        $('#fixed-nav a[href$=' + page + ']').css('color','red');

        $(document).scroll(function() {
            highlightCurrentNavItem.scroll();
            highlightCurrentNavItem.indexOfSmallest(current);
            page = hrefId[page];
            $('#fixed-nav li a').attr('style','');
            $('#fixed-nav a[href$=' + page + ']').css('color','red');
        });
    }
}