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