【jQuery】スクロールでページの背景色をセクション毎に変化させる方法のデモページ

.wrap {
  margin: 100px auto 0;
}

.block-bg {
  transition: all .7s ease;
}

.block {
  height: 1000px;
  text-align: center;
}

@media screen and (max-width:640px){
  .wrap {
    width: 100%;
  }
}

$(function(){
  var secArr = new Array();
  var current = -1;
  /* ここに背景色を順に記述する*/
  var secColor = new Array('#36ab77','#e04747', '#e7ff03', '#035fff');
  $('.block').each(function (i) {
      secArr[i] = $(this).offset().top;
  });
  function chengeBG(secNum) {
      if (secNum != current) {
          current = secNum;
          $('.block-bg').css({backgroundColor: secColor[current]});
      }
  }
  $(window).on('load scroll resize',function(){
      for (var i = secArr.length-1; i>=0; i--) {
          if ($(window).scrollTop() > secArr[i]){
              chengeBG(i);
              break;
          }
      }
  });
});