Cambiar el color de fondo del encabezado cuando la página se desplaza en el encabezado fijo

tengo un encabezado transparente pegajoso usando el siguiente código css en mi sitio web www.obviagency.com

CÓDIGO CSS:

#site-header-inner {
height:0px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
}

me gustaría cambiar el color de fondo en el desplazamiento a blanco. alguien me puede ayudar por favor porque nada de lo que he intentado funciona:/

gracias

Solución del problema

Tendría que usar JavaScript con un detector de eventos de desplazamiento. Utilicé el azul como ejemplo para que pueda ver el cambio y agregué una propiedad de transición al encabezado para que transcurriera sin problemas.

let header = document.getElementById('site-header-inner');
document.addEventListener('scroll', function() {
 
 // Get the scroll position
 let scrollPos = window.pageYOffset;
 
 if ( scrollPos > 100 ) {
 header.style.backgroundColor = "white";
 } else {
 header.style.backgroundColor = "blue";
 }
 
 
});

#site-header-inner {
 height:50px;
 z-index:170;
 margin:0 auto;
 width:100%;
 position:fixed;
 top:0;
 margin-top:10px;
 background-color: blue;
 transition: all 0.3s;
}
#section {
 height: 1000px;
}

<header id="site-header-inner">
</header>
<section id="section">
</section>