movimiento brusco

[kenproxd]

Hola a todos,

estoy haciendo una página que consta de dos divs que cubren verticalmente toda la pantalla, uno a la izquierda que sería como el header y otro a la derecha donde se mostrará el contenido.

Lo que quiero lograr es mantener el div de la izquierda todo el tiempo estático y que al hacer scroll el único que se mueva sea el del contenido. Lo he hecho de la siguiente manera:

Código Javascript:

$(window).scroll(function(){
 
    var wScroll = $(this).scrollTop();
    
    $('.header').css({
        // 'transform': 'translate(0px,' + wScroll +'px)'
        'margin-top': wScroll
    });
 
});
 

Código HTML:

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
</div>
 

Código CSS:

.container {
   display: block;
   width: 100%;
   height: 100vh;
}
.header {
   width: 33.3%;
   height: 100%;
   background: pink;
    float: left;
}
.content {
    float: right;
    width: 66.6%;
}
 

Funciona bien, el problema es que al hacer scroll con la rueda del mouse pareciera como si el fondo del div .header desapareciera unos milisegundos y volviera a aparecer, en cambio al bajar la página con la barrita del navegador esto no sucede.
He probado tanto con translate como con margin para ver si es problema de la propiedad pero en ambos casos pasa lo mismo.