Cacher is the code snippet organizer for pro developers

Change header class depending on the current page

// HEADER STYLE SWITCHER ON PAGE CHANGE
    
// Create array from pages      
var mypages = [];               //access page ID:         $(mypages[1][0]).attr('id')
var headerNames = [];           //access header name:     headerNames[3][3]
$('body .page').each(function(pageIndex,mypage) {
    //Create pages list
    mypages.push($(mypage));

    //Create headerNames list
    obj = {};
    if (pageIndex == 0) {
        obj[pageIndex] = "";
    } else if (pageIndex % 2 != 0) {
        obj[pageIndex] = "header-blue";
    } else {
        obj[pageIndex] = "header-white";
    }
    headerNames.push(obj);
});
    
//Scroller
$(document).on('scroll', function() {
    var position = $(this).scrollTop(); 

    $('body .page').each(function(pageIndex,mypage) {
        var pageID = $(mypages[pageIndex][0]).attr('id');
        
        //Check if -page- top is in viewport 
        if(position >= $('#'+pageID).position().top) {
            $('#main-header').removeClass(function(index,css) {
                return (css.match (/(^|\s)header-\S+/g) || []).join(' ');
            });
            $('#main-header').addClass(headerNames[pageIndex][pageIndex]);
            $('a').removeClass('active');
            $('#nav-page a[href="#'+pageID+'"]').addClass('active');
         }
    });
  
});
// END  HEADER STYLE SWITCHER ON PAGE CHANGE