STAY ON TOP

by olimann

HTML

<div class="homepage-intro"></div>
<div class="wrapper">
    <div class="navHeader">Menu</div>
    <div class="content">some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
        <br />some content here
   ...

CSS

Body {
    margin: 0;
    padding: 0;
}
.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
}

JavaScript

$(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