CSS fixed footer, floating header

Question

I am trying to build a page with CSS that works like Apple's page here: http://www.apple.com/macbook-pro/

This page has something similar but not as elegant as it uses javascript: http://lifeinthegrid.com/simple-css-fixed-header/

I am trying to build a page with a small header that scrolls away, but under that, a navigation bar that scrolls with the header, but only to the top of the screen, then stays fixed to the top while the content scrolls under it.

I also need a footer that will stay fixed to the bottom if the content does not fill to the bottom of the window.

My footer is working fine, but the header just scrolls away. When I try to add position:fixed and top:0 to either my header or navigation styles, the header or navbar just disappear. How can I make this work?

My current CSS looks like:

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    min-height:100%;
    position:relative;
}

#header {
    height:40px;
    background-color:#333;
}

#headerbox {
    width:1000px;
    margin:auto;
    padding-top:10px;
}

#navigation {
    height:50px;
    background-color:#eeeeee;
    border-bottom:1px solid #dddddd;
}

#content {
    padding-bottom:50px; /* Height of the footer element */
}

#contentbox {
    width:1000px;
    margin:auto;
    padding-top:20px;
    padding-bottom:20px;
}

#footer {
    height:50px;
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    background-color:#eeeeee;
    border-top:1px solid #dddddd;
}

#footerbox {
    width:1000px;
    margin:auto;
    padding-top:10px;
}

Answer 1

As per your comments, you should be able to do what you want with the following javascript (with the jQuery library)

var flyout = $('#flyout'),
    flyoutPosition = flyout.offset().top;

$(window).scroll(function () {
    if ($(this).scrollTop() > flyoutPosition) {
        flyout.addClass('fixed');
    } else {
        flyout.removeClass('fixed');
    }
});

/* this is needed*/
.fixed {
    position:fixed;
    top:0;
    left:0;
    z-index:2;
    width:100%;
}

/* these are for the example */
body, html {
    height:1000px;
    position:relative;
    margin:0;
    padding:0;
}
#header {
    height:75px;
    background:green;
}
#flyout {
    height:50px;
    background-color:blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="flyout"></div>