CSS 固定页脚，浮动页眉

Question

我正在尝试使用 CSS 构建一个类似于 Apple 页面的页面：http://www.apple.com/macbook-pro/

这个页面有一些类似的东西，但不像它使用 javascript 那样优雅： http://lifeinthegrid.com/simple-css-fixed-header/

我正在尝试构建一个带有一个可以滚动的小标题的页面，但在此之下，一个导航栏会随着标题滚动，但只到屏幕顶部，然后在内容滚动时保持固定在顶部在它下面。

如果内容没有填充到窗口底部，我还需要一个保持固定在底部的页脚。

我的页脚工作正常，但页眉只是滚动了。当我尝试将 position:fixed 和 top:0 添加到我的标题或导航样式时，标题或导航栏就会消失。我怎样才能做到这一点？

我当前的 CSS 看起来像：

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

根据您的 cmets，您应该能够使用以下 javascript（使用 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>