Ist es möglich, ein Div auf einer X-Achse zu beheben, aber blättern auf der Y-Achse?

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

Sie den obigen Code verwenden, habe ich eine sehr breite #container dass scrollt horizontal, mit ScrollTo.js. Und die #header, dass die Kontrollen ist in einer festen Position, wie ich will es nicht mit dem Rest der Seite / des Behälters blättern. Mein Problem ist, dass wenn Sie den windonw vertikal die Größe, die Behälter verstecken die #header unterhalb aufgrund seiner Position fixiert ist.

Kann die #header horizontal fixiert werden, sondern bewegen noch vertikal? Mit jQuery oder CSS?

Mein anschauliches Beispiel ist hier: http://www.kargo2.com/Stackover/

Danke.

Answer 1

Versuchen Sie, diese recht einfache Option:

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

Zusammen mit:

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

Ich habe eine 15px Offset oben hinzugefügt und links zu zeigen, wie ein Offset zu tun, aber Sie können diese Teile löschen, wenn Sie das Element fest in der Ecke des Ansichtsbereiches wollen.

Answer 2

Ändern Sie einfach die position von fixedto absolute und halten top: 0; left:0;