Fixed header in an horizontal parralax responsive website

Question

Here is the example.

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

I try to keep the header as the footer display in this example. Full width with a fixed top position.

The problem is that i making this website responsive with horizontal navigation : if i horizontaly scroll, the header ends. If i try to display the header in a fixed/absolute top position it will kill it.

The goal is to keep the header responsive adjustments, in a full width top-center position.

Thank you for your help,

Sorry for my english.

Seb.

Answer 1

This is how I would proceed to get you aim :

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;
}