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

[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