jquery - X 軸に div を固定し、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*/
}

上記のコードを使用すると、#containerScrollTo.js を使用して水平方向にスクロールする非常に広い画面が作成されます。そして、#headerそれを制御するのは、ページ/コンテナの残りの部分と一緒にスクロールしたくないので、固定位置にあります。私の問題は、ウィンドウのサイズを垂直方向に変更する#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

positionfromfixedをtoに変更しabsoluteて保持するだけですtop: 0; left:0;