"Position：Relative"コンテナ部門内で垂直方向と "絶対方向" Divを "固定"位置に設定

Question

divを作成してページに垂直に固定される方法を探しています。 divはページ上の同じ場所にとどまります。しかし、それは絶対的に水平に配置されているので、ユーザーの画面が私のWebページよりも狭い場合、右または左にスクロールしても、divが画面と共に移動することはなく、場合によっては画面の端に半分ページを完全にオフにすることができます。

このdivは、 "Position：Relative"部門内にある必要があります。

divの軸を変更するために異なる位置を割り当てる方法はありませんが、これは私が達成したいと思っている効果を説明する最も良い方法です。

私はこれまでこれを持っていましたが、これは基本的に相対ディビジョン内の固定ディビジョンです。

CSS

#container { 
position:relative; 
width:700px; 
height:1000px; 
top:50px; 
left:50px; 
background-color:yellow; 
} 

#blue-box{ 
position:fixed; 
width:100px; 
height:100px; 
background-color:blue; 
margin-top:20px; 
margin-left:400px; 
{ 

HTML

<div id="container"> 
<div id="blue-box"></div> 
</div> 

私も問題を示す助けるためにjsFiddleを作成しました。

これは垂直には問題ありませんが、黄色のボックス（コンテナ）よりも狭く、水平方向にスクロールするようにWebブラウザのサイズを変更すると、青色のボックスがページと共に移動します。私はそれが起こるのを止めることを望んでいます。

これをCSSで実現する方法がない場合は、現代のすべてのブラウザとIE7とIE8の両方で動作する限り、JavaScriptを使用することができます。 （これがJavaScriptタグを追加した理由です）

私を助けてくれますか？

Answer 1

JQueryでは、ドキュメントのscrollLeft（）プロパティを使用します。これは働くだろう

$(window).scroll(function(event) { 
    $("#blue-box").css("margin-left", 400-$(document).scrollLeft()); 
}); 

は

http://jsfiddle.net/zhQkq/9/

も幸運を参照してください！

編集：あなたはそれがあなたのプリセットのmargin-left代わりにハードコードされた「400」を使用したい場合は、絶対に横軸上のコンテナのdiv内のdivを配置しない

$(window).scroll(function(event) { 
    $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft()); 
}); 

Answer 2

これは私の解決方法です（OperaとFirefoxでテスト済み）：http://jsfiddle.net/cCH2Z/2 トリックはright: 0px;と指定すると、ウィンドウの右端から0pxの位置になります。