<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”不可见,这将强制您水平滚动以查看它。当您垂直滚动时,红框应保持固定位置。