jQuery的 - 如何做一个固定的股利滚动垂直滚动

这是种以下的变化后水平，但有一点不同：How do I get a fixed position div to scroll horizontally with the content? Using jQuery 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”红色框不在视图中，这将迫使您水平滚动以查看它，而当您垂直滚动时，红色框应处于固定位置。

来源

2011-03-04 James Nine