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

Question

这是以下的一种变体,但有一点不同:如何获得固定位置div以与内容水平滚动？使用jQuery

这是我的变化:http://jsfiddle.net/Bdwc4/

基本上,我希望能够在div的最右边看到"x",为了做到这一点,div必须是绝对的.但与此同时,我需要在垂直滚动时修复div.换句话说,在垂直或水平滚动时,您应始终能够在该固定位置看到"x".它有点像我想要它做的,但只有当你在窗口的顶部.无论你在哪里垂直滚动,我都希望能够水平滚动.

如果你选择不使用上面的jsfiddle,这里是我正在使用的代码:

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

输入代码后,水平和垂直缩小浏览器窗口,直到红色框中的"x"不在视图中,这将迫使您水平滚动查看它,当您垂直滚动时,红色框应该是在固定的位置.

Answer 1

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