Можно ли исправить деление на оси X, но прокрутить по оси Y?

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

Используя приведенный выше код, у меня есть очень широкий #container, который прокручивается по горизонтали, используя ScrollTo.js. И #header, который управляет им, находится в фиксированном положении, так как я не хочу, чтобы он прокручивался с остальной частью страницы / контейнера. Моя проблема в том, что если вы измените размеры windonw по вертикали, контейнер прячется под #header из-за его фиксированного положения.

Можно ли зафиксировать #header по горизонтали, но при этом прокручивать вертикально? Используя jQuery или CSS?

Мой живой пример здесь: http://www.kargo2.com/Stackover/

Спасибо.

Answer 1

Попробуйте эту довольно простую опцию:

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

Наряду с:

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

Я добавил смещение сверху на 15 пикселей и слева, чтобы показать вам, как сделать смещение, ноВы можете удалить эти части, если хотите, чтобы элемент был плотно расположен в углу области просмотра.

Answer 2

Просто измените position с fixed на absolute и сохраните top: 0; left:0;