JQuery - how to make a fixed horizontal scroll of a div after vertical scroll

Question

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

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

Basically, I would like to see that "x" is to the right of the div, and for this 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 see the “x” in that fixed position, scrolling vertically or horizontally. This is what I want to do, but only when you are at the top of the window. I would like to be able to scroll horizontally, no matter where you scroll vertically.

If you decide 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 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 entering the code, reduce the browser window horizontally and vertically until “x” is displayed in the red box, which forces you to scroll horizontally to see it, and while you are scrolling vertically, the red box should be in a fixed position.

Answer 1

Seems like this is what you need: http://css-tricks.com/scrollfollow-sidebar/

Answer 2

Check out this url

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