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.

[Alexis88]

Quizá si el <header> tuviera una posición fija, eso no sucedería. Prueba de esa manera.

Un saludo

[pzin]

¿Estás intentando imitar un simple position: fixed de CSS?

[kenproxd]

Gracias por sus respuestas,

sí sé que con position fixed se puede pero lo que quería saber en realidad es por que se producen esos saltos medios bruscos al hacer scroll utilizando el método que estoy probando.