Parte siempre visible

[mblascog]

Gracias por vuestras sugerencias aunque para mi un poco complicadas, pero con lo dicho he pensado lo siguiente.
Tengo creadas las dos capas, de inicio, la primera visible y la segunda no

Código CSS:

#capcalera{
    display:block;
    float:left;
    width:100%;
    background-color:#c2b89f;
    height:89px;
    margin:0
}
#capcalera2{
    display:none;
    float:left;
    width:100%;
    background-color:#c2b89f;
    margin:0;
    top:0;
    position:fixed;
}
 

Y al detectar el scroll, por jquery, escondo la primera y visualizo la segunda

Código Javascript:

$(document).on('scroll', function() {
        if ($(document).scrollTop() > 0) {
            $('#capcalera').fadeOut(500);
            $('#capcalera2').fadeIn(500);
        }
        else {
            $('#capcalera').fadeIn(500);
            $('#capcalera2').fadeOut(500);
        }   
    });
 

Y funciona bien con un pero. Y es que la segunda, capcalera2, al añadir la propiedad position:fixed para que se quede fija a la parte superior, cambia el tamaño,
es decir:
- capcalera2 con position:fixed hace un ancho de 1920
- capcalera2 sin position:fixed hace un ancho de 1190
Y lo que es correcto, por diseño, es 1190.

Y la pregunta es, qué es lo que provoca el cambio de ancho de la capa?

Gracias