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