修复了水平视差响应网站中的标题

Question

以下是示例。

http://www.poste-ton-look.com/OneMuze/index.html

我尝试将标题保留为此示例中的页脚显示。全宽，顶部固定位置。

问题在于我使这个网站响应水平导航：如果我在水平滚动，标题结束。如果我试图在固定/绝对顶部位置显示标题，它将杀死它。

目标是将标题响应调整保持在全宽顶部中心位置。

感谢您的帮助，

抱歉我的英文。

的Seb。

Answer 1

这就是我如何着手实现目标：

<强> FIDDLE

HTML：

<header></header>
<section>
    <span>bla</span>
    <span>bli</span>
    <span>blu</span>
    ...
</section>
<footer></footer>

CSS：

*{
    margin:0;
    padding:0;
}

html,body{
    height:100%;
    width:100%;
}


header,footer{
    position:fixed;
    left:0;
    width:100%;
    height:50px
}
header{
    top:0;
    background:red;
}
section{
    height:100%;
    width:4000px;
    background:green;

}
span{
    position:relative;
    top:100px;
    margin:100px;
}
footer{
    bottom:0;
    background:yellow;
}