Posizionare un Div "Fisso" Verticalmente e "Assoluto" orizzontalmente in un "Posizione: Relativo" Contenitore Div

Question

Sto cercando un modo per creare un div che verrà corretto verticalmente sulla pagina, quindi se l'utente scorre in basso, il div rimane nello stesso punto della pagina. Ma averlo posizionato in posizione assolutamente orizzontale, quindi se lo schermo degli utenti è più stretto della mia pagina web, scorrendo verso destra o verso sinistra non si farà muovere il div con lo schermo e, in alcuni casi, resterà mezzo visibile sul bordo dello schermo o completamente fuori dalla pagina.

Questo div deve essere all'interno di un "Position: Relative" Div.

Sono quasi sicuro che non è possibile assegnare diverse posizioni all'asse variabile di un div ma questo è il modo migliore per descrivere l'effetto che spero di ottenere.

L'ho ottenuto fino ad ora, che è fondamentalmente solo un Diviso fisso all'interno di un Div relativo.

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> 

Ho anche creato un jsFiddle per aiutare a dimostrare il problema.

Questo funziona perfettamente per la verticale, ma se ridimensionate il vostro browser in modo che sia più stretto della casella gialla (contenitore) e quindi scorrete orizzontalmente, la casella blu si sposta con la pagina. Spero di impedire che ciò accada.

Se non c'è modo di ottenere ciò tramite CSS, sono perfettamente felice di utilizzare JavaScript finché funziona con tutti i browser moderni e sia IE7 che IE8. (È per questo che ho aggiunto il tag JavaScript)

Qualcuno può darmi una mano?

Answer 1

Con JQuery, utilizzare la proprietà scrollLeft() del documento! Questo dovrebbe funzionare

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

Vedi anche

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

Buona fortuna!

Edit: Se si desidera utilizzare il preset margin-left al posto di un hard-coded "400", utilizzare

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

Answer 2

Ecco la mia soluzione (testata in Opera e Firefox): http://jsfiddle.net/cCH2Z/2 Il trucco è specificare right: 0px;, questo posizionerà la casella 0px dal bordo destro della finestra.