Change the background color of each section of the page when the user scrolls
Heres your code slimmed down, the problem you were having with the loop was that you weren't getting offset().top of your sectionTop[i].

var myScope = zeus = false;
var colors = ['blue','yellow','green','purple','brown'];
var sectionId = '#section';
var sections = 5;

$(window).on('scroll', function() {
myScope = $(window).scrollTop() + 300;

for (var i = sections; i &gt;= 0; i--) {
   var sid = i &gt; 0 ? i : 1;
   var css = 'white';
   if(myScope &gt;= $(sectionId + sid).offset().top 
   &amp;&amp; myScope &lt; $(sectionId + sid).offset().top) {
    css = colors[i];
   }

   $(sectionId + sid).css('background-color', css);
}

});