jQuery - how to make a fixed div scroll horizontally after scrolling vertically

This is kind of a variation of the following, but a little different: How do I get a fixed position div to scroll horizontally with the content? Using jQuery

Here is my variation: http://jsfiddle.net/Bdwc4/

Basically, I would like to be able to see that "x" on the far right of the div, and in order to do so, the div must be absolute. But at the same time, I need the div to be fixed when scrolling vertically. In other words, you should always be able to see the "x" in that fixed position, while scrolling vertically or horizontally. It kind of does what I want it to do, but only when you're at the top of the window. I'd like to be able to scroll horizontally, regardless of where you scroll vertically.

If you choose not to use jsfiddle above, here is the code I'm using:

<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>

After you enter in the code, shrink the browser window horizontally and vertic开发者_开发知识库ally until the "x" in the red box is out of view, which will force you to scroll horizontally to see it, and while you scroll vertically, the red box should be in a fixed position.

---

Looks like this is what you're after: http://css-tricks.com/scrollfollow-sidebar/

---

Look this url

http://ryanfait.com/position-fixed-ie6/