<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', callback);

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.