<div class="wrapper">
  <div class="target" id="target">
    <h1>Scroll me!</h1>
  </div>
</div>

.wrapper {
  width: 100%;
  height: 150em;
}

.target {
  position: fixed;
  width: 100%;
  height: 100%;
}

var colors = [
  'blue',
  'white',
  'red',
  'green',
  'brown',
  'purple'
];

var colorIndex = 0;

window.addEventListener('scroll', throttle(callback, 1000));

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

function callback() {
  var target = document.getElementById('target');
  
  target.textContent += ' .';
  target.style.backgroundColor = colors[colorIndex];
  
  if (colorIndex === colors.length) {
    colorIndex = 0;
  } else {
    colorIndex++;
  }
}