Is it possible to lock the div along the x axis but scroll along the y axis?

Question

HTML

<div id="header">
    <ul id="nav">
       <li><a id="ho" href="#spread1-anchor">Home</a> /</li>
       <li><a id="bg" href="#spread2-anchor">Background</a> /</li>
       <li><a id="ap" href="#spread3-anchor">Approach</a> /</li>
       <li><a id="se" href="#spread9-anchor">Services</a> /</li>
       <li><a id="cl" href="#spread10-anchor">Clients</a> /</li>
       <li><a id="co" href="#spread11-anchor">Contact</a></li>
    </ul>
</div>

<div id="container">
<!-- Very wide horizontal scrolling content-->
</div>

CSS

#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
width: 8000px;
height: 590px;
/*etc*/
}

Using the code above, I have a very wide #containerone that scrolls horizontally using ScrollTo.js. And the #headerone that controls it is in a fixed position since I don't want it to scroll along with the rest of the page / container. My problem is that if you resize the windshield vertically, the container is hiding under #headerdue to a fixed position.

Is it possible to fix #headerhorizontally, but still scroll vertically? Using jQuery or CSS?

My live example is here: http://www.kargo2.com/Stackover/

Thank.

Answer 1

:

$(window).scroll(function(){
    $('#header').css({
        'top': $(this).scrollTop() + 15
    });
});

:

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

15px , , , , , .

Answer 2

position fixed absolute top: 0; left:0;