jQuery - 如何在垂直滚动后水平固定div滚动

Question

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

Answer 1

看起来这就是你想要的： http ： //css-tricks.com/scrollfollow-sidebar/

Answer 2

Look this url

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