Change Background based on section.offset()

HTML

<div id="background"></div>

<section>
    <div class="container">
    
    </div><!-- /container -->
</section>
<section>
    <div class="container">
        </div><!-- /container -->
</section>
<section>
    <div class="container">
    
    </div><!-- /container -->
</section>
<section>
    <div class="container">
    
    </div><!-- /container -->
</section>
<section>
    <div class="container">
    
    </div><!-- /container -->
</section>
<section>
    <div class="container">
    
    </div><!-- /container -->
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#background {
    width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;   
    z-index: -10;
    
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
}

section {
    
    margin-top: 200px;
    padding: 2em 0;
    box-shadow: 0px 2px 8px #222, 0px -2px 8px #222;
}

.container {
    width: 85%;
    margin: 0 auto;
}

JavaScript

var secTops = [];
var bgHues = [0,30,140,195,240,330];
var bgFront = 'hsla(';
var bgBack = ',60%,35%,1)';
var currentIndex = 0; //so the first background shows on load
$('#background').css('background', bgFront + bgHues[currentIndex] + bgBack);

$('section').each(function() {
    var t = $(this).offset().top;
    secTops.push(t);
});

$(window).scroll(function() {
    var s = $(this).scrollTop();
    
    for (var i = 0; i < $('section').length; i++) {
        if ((s > secTops[i]) && (s < secTops[i+1])) {
            currentIndex = i;
        }
    }
    $('#background').css('background', bgFront + bgHues[currentIndex] + bgBack);
});