html - CSS 固定页脚， float 页眉

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

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