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）

＆＃13;

var flyout = $('#flyout'),
    flyoutPosition = flyout.offset().top;

$(window).scroll(function () {
    if ($(this).scrollTop() > flyoutPosition) {
        flyout.addClass('fixed');
    } else {
        flyout.removeClass('fixed');
    }
});

＆＃13;

/* 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
}

＆＃13;

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

＆＃13;

CSS固定页脚，浮动标题

1 个答案: