Stay-On-Top Menu et header height 100%

Bonjour a tous.

J'aimerais créer ce genre de mise en page:

[.homepage-intro 100%]
[.navHeader style :Stay-On-Top]
[.content]

Mon problème c'est que la hauteur de l'élément ".homepage-intro" ne s'actualise pas correctement selon la hauteur de ma fenêtre.
démo

<div class="homepage-intro"></div>
<div class="wrapper">
    <div class="navHeader">Menu</div>
    <div class="content">
           bla bla bla...
    </div>
</div>

.homepage-intro {
    background:yellow;
    display: block;
}
.wrapper {
    background:#FFF;
}
.content {
}
.navHeader {
    background:#AAA;
    width:100%;
    height: 50px;
    display: block;
}
.navFix {
    position:fixed;
    top:0px;
    left: 0px
}

$(document).ready(function () {

    $('.homepage-intro').css({
        'height': (($(window).height()) - 0) + 'px'
    });

    var $navHeader = $(".navHeader");
    var $pos = $navHeader.position();

    $(window).scroll(function () {
        var windowpos = $(window).scrollTop();

        if (windowpos >= $pos.top) {
            $navHeader.addClass("navFix");
        } else {
            $navHeader.removeClass("navFix");
        }
    });

}); // end ready

$(window).resize(function () {
    $('.homepage-intro').css({
        'height': (($(window).height()) - 0) + 'px'
    });
}); // end resize

Merci de m'aider
Modifié par olimann (11 Mar 2014 - 16:49)

je t'ai appliqué les modifs directement sur ton fiddle, regarde le css je suis passer par des positions absolute et retirer une parti de ton js http://jsfiddle.net/WhXN9/23/

tazzkiller a écrit :
je t'ai appliqué les modifs directement sur ton fiddle, regarde le css je suis passer par des positions absolute et retirer une parti de ton js http://jsfiddle.net/WhXN9/23/

Je ne comprends pas, ça ne fonctionne pas du tout ?
j'ai bien essayer d'utiliser le css pour la hauteur ".homepage-intro" mais ça ne fonctionne pas non plus.

Body, html {
    height: 100%;
}
.homepage-intro {
    min-height: 100%;
}

On peut faire quand même beaucoup plus simple.