El evento a detectar es el "scroll", lo puedes usar en windows, document, o body. Lo ideal es que sea contenedor de header y más aún de toda los elementos del layout de la página.
var header = document.querySelector('header')
window.addEventListener('scroll', e=>{
header.style.setProperty('background','black')
}
Conforme vas haciendo scroll la cantidad de píxeles que se ha "scrolleado" se encuentra e window.scrollY si el scroll es vertical window.scrollX si es horizontal.
Puedes usar lo anterior para controlar en "cuánto" ejecutar lo que gustes.
Por ejemplo:
var header = document.querySelector('header'),
alturaHeader = parseFloat(getComputedStyle(header).height)
window.addEventListener('scroll', e=>{
var color
if(window.scrollY == 0){
color = 'white'
}
else if(window.scrollY >= alturaHeader &&
window.scrollY < 2*alturaHeader) {
color = 'black'
}
else if(window.scrollY >= 2*alturaHeader &&
window.scrollY < 3*alturaHeader) {
color = 'blue'
}
else if(window.scrollY >= 3*alturaHeader) {
color = 'yellow'
}
header.style.setProperty('background',color)
}
Nota: Pará obtener el valor de una propiedad css en el momento de la ejecución uso el método del objeto Window: getComputedStyle. Éste método recibe como parámetro el objeto html del cuál se quiere analizar sus estilos. Éste devuelve un objeto con todas las propiedades css aplicables.
De igual forma para insertar una propiedad css sobre la marcha uso el método de la propiedad style de todos los elementos html: setProperty. El primer parámetro es la propiedad y el segundo su valor.