[SOLUCIONADO] Problema con header tipo scroll

[kojicomics]

Hola a todos

Estoy intentando crear un header que se contraiga según vaya haciendo scroll en la página hasta que éste adopte una forma más compacta y se quede en una posición fija (parecido a la barra de navegación de Google Plus y muchos otros sitios web)

He encontrado varios ejemplos con JQuery pero es algo que no me interesa en mi sitio web, asíque he estado haciendo pruebas con 'DOMMouseScroll' y 'onMouseWheel' en JavasCript

He logrado que funcione pero cuando se contrae, la vista se desplaza hacia abajo tanto como la altura del header antes de contraerse, perdiendo de vista casi la mitad del contenido de la web

Para que podáis observar el problema os dejo parte del código de mi sitio en jsfiddle (sobran muchas cosas en el css porque no me he molestado mucho en limpiar la parte innecesaria para éste ejemplo)

http://jsfiddle.net/kojicomics/uhbjeb79/

Creo que el problema está en el CSS y no en JS

Gracias

[mbm150]

Hola Creo tener la solución.

El problemas es el CSS, al convertir un elemento de relative a fixed el elemento inferior sube todo el espacio que tenia el relative. A ver si me explico:

Tienes un header que mide 200, un margen de 10 y debajo de esto otro div, lo que significa que el div esta a 210 de arriba. Al pasar a fixed, los 200 se eliminan, entonces tu div ahora esta a 10 de arriba, has perdido 200px de información.

La solución es al convertir a fixed tienes que añadir un margin-top a el div de abajo, para que se baje y no pierdas nada.

Saludos.

[kojicomics]

Gracias por la ayuda, ya está solucionado