problemas con header, quiero que al bajar con scroll se posicione en la partesuperior

[jesus_e_borquez_m]

Lo que pasa es que tengo una duda sobre como hacer para que el encabezado de mi pagina (imagen de abajo el encabezado blanco), baje al hacer scroll pero al utilizar el fixed como sabrán se queda en la misma posición, dejando el hueco de la imagen negra de arriba y lo que busco es que al bajar la parte blanca se posicione hasta arriba de mi página, espero haber sido claro y de antemano agradezco su respuesta.

[Alexis88]

Sería cuestión de que al momento de hacer scroll, verifiques si la cantidad de píxeles desplazados es mayor o igual a la altura de la cabecera, de ser así, fijas la posición del menú, caso contrario, la dejas como originalmente estaba (sin posición fija).

Un ejemplo:

Código HTML:

<header></header>
<nav class = "natural">
    <li>PHP</li>
    <li>JavaScript</li>
    <li>Java</li>
    <li>C++</li>
</nav>
 

Código CSS:

header{
    height: 100px;
}
 
.natural{
    width: 100%;
}
 
.fixed{
    position: fixed;
    top: 0;
    width: 100%;
}
 

Código Javascript:

var nav = document.getElementsByTagName("nav")[0]; //El menú
 
window.addEventListener("scroll", function(event){
    if (this.scrollY >= 100){
        nav.className = "fixed";
    }
    else{
        nav.className = "natural";
    }
}, false);
 

Para evitar cambiar la posición desde JavaScript, cree dos clases en la hoja de estilos, una para cuando el menú se encuentre con posición fija y otra para cuando no posea esa posición, luego, solo tengo que cambiar el nombre de la clase y se le asignan las propiedades que cada una de ellas posee.

Y así es como resulta: http://jsbin.com/qayiwo

Saludos

[IsaBelM]

me remito a lo dicho en este post sobre scrollY

[jesus_e_borquez_m]

Ya lo resolví, muchas gracias por su ayuda.