Esto es una especie de variación de lo siguiente, pero un poco diferente: ¿Cómo obtengo un div de posición fija para desplazarme horizontalmente con el contenido? Usando jQuery

Aquí está mi variación:http: //jsfiddle.net/Bdwc4

Básicamente, me gustaría poder ver que "x" en el extremo derecho del div, y para hacerlo, el div debe ser absoluto. Pero al mismo tiempo, necesito que el div se arregle cuando me desplazo verticalmente. En otras palabras, siempre debe poder ver la "x" en esa posición fija, mientras se desplaza vertical u horizontalmente. De alguna manera hace lo que quiero que haga, pero solo cuando estás en la parte superior de la ventana. Me gustaría poder desplazarme horizontalmente, independientemente de dónde te desplaces verticalmente.

Si elige no usar jsfiddle arriba, aquí está el código que estoy usando:

<style>
.scroll_fixed {
    left:500px;
    position:absolute
}
.scroll_fixed.fixed {
    position:fixed
} 
.x { float:right }

.foo { background-color: red; width: 150px; height:150px; left:500px }
body { width: 500px }
.header { margin-top: 100px }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }  
});
</script>
<div class="header"></div>
<div class="scroll_fixed foo"><div class="x">x</div></div>
<div>
    Enter a very long string of text
</div>

Después de ingresar el código, reduzca la ventana del navegador horizontal y verticalmente hasta que la "x" en el cuadro rojo esté fuera de la vista, lo que lo obligará a desplazarse horizontalmente para verlo, y mientras se desplaza verticalmente, el cuadro rojo debería estar en una posición fija.