Position:fixed pour un header et comportement du contenu

Bonjour, je me fais un site qui est constitué d'un header et puis du contenu.
Le header contient la bannière du site et un texte d'introduction.
Et le bloc contenu contient les posts (c'est un blog).

J'ai mis mon header en position:fixed car je désire qu'il reste en permanence "on top".
ça fonctionne bien, excepté ceci :
J'ai un javascript (jquery) qui permet de faire disparaître le texte d'intro si le lecteur désire plus de place à l'écran.
Le texte se rétracte vers le haut; le problème est que le contenu ne remonte pas vers le haut alors qu'il devrait...
Si je retire le position:fixed du header; celà fonctionne.
Le problème est donc lié.

Puis je avoir un header fixe et que mon contenu se comporte quand même comme s'il était en "relatif" par rapport au header ?

HTML et CSS : http://pastie.org/359577

PS :
Il y a une solution en javascript :

$(document).ready(function() {
    $("#header").css("position", "relative");
});

$(window).scroll(function() {
    $("#header").css("top", $(window).scrollTop() + "px");
});

Le problème est qu'il y a un parasitage (le mouvement du header n'est pas propre) lorsque l'on scrolle...