Posicionar una div "fija" verticalmente y "absoluta" horizontalmente dentro de una "posición: relativa" Container Div

Question

Estoy buscando una manera en la que pueda crear un div que se fijará en la página verticalmente, por lo que si el usuario se desplaza abajo, el div se queda en el mismo lugar en la página. Pero colóquelo horizontalmente, de modo que si la pantalla de los usuarios es más estrecha que mi página web, desplazarse hacia la derecha o hacia la izquierda no hará que el div se mueva con la pantalla y, en algunos casos, permanecerá medio visible en el borde de la pantalla o fuera de la página por completo.

Este div debe estar dentro de una "Posición: Relativa" Div.

Estoy bastante seguro de que no hay forma de asignar diferentes posiciones al eje variable de un div pero esta es la mejor manera de describir el efecto que estoy esperando lograr.

Tengo esto hasta el momento, que es básicamente una Div Fixed dentro de Div relativa.

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> 

También he creado un jsFiddle para ayudar a demostrar el problema.

Esto funciona bien para la vertical, pero si cambia el tamaño de su navegador web para que sea más angosto que el cuadro amarillo (contenedor) y luego se desplaza horizontalmente, el cuadro azul se moverá con la página. Espero evitar que eso suceda.

Si no hay manera de lograr esto a través de CSS, estoy muy contento de usar JavaScript, siempre y cuando funcione con todos los navegadores modernos y tanto IE7 como IE8. (Por eso he agregado la etiqueta JavaScript)

¿Alguien me puede ayudar?

Answer 1

Con JQuery, use la propiedad scrollLeft() del documento. Esto funcionaría

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

Véase también

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

Buena suerte!

Editar: Si usted quiere que use su margen izquierda en lugar de un hard-coded "400" preestablecido, utilice

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

Answer 2

aquí está mi solución (probado en Opera y Firefox): http://jsfiddle.net/cCH2Z/2 El truco consiste en especificar right: 0px;, esto va a colocar el cuadro de 0px desde el borde derecho de la ventana.