Question

我已经创建了一个例子来帮助解释。 http://jsfiddle.net/9AUbj/1/

<style>
div#one {}
div#two {
    height: 50px;
    background-color: blue;
    width: 1000px;
}
div#three {
    height: 1000px;
}
</style>
...
<div id="one">Hello World!</div>
<div id="two"></div>
<div id="three"></div>

我想要“Hello World！”当用户水平滚动时，与窗口水平移动。但是我不要希望它在用户垂直滚动时与窗口垂直移动。做这个的最好方式是什么？我正在使用Bootstrap和jQuery UI，以防这些可能会有所帮助。但是，我也对纯CSS解决方案感兴趣。

提前致谢:-) KTM

Answer 1

无论何时滚动窗口，都要将#one元素重新定位到屏幕上。另外，＃oneone应该是position：absolute。

$(window).scroll(function () {
    $("#one").css({
        left: $(this).scrollLeft()
    });
});

以下是您使用新代码的小提琴：http://jsfiddle.net/9AUbj/15/

Answer 2

虽然我承认只有CSS的解决方案很酷，但您无法根据轴应用定位。通过固定定位的工作方式，即使固定位置元素向外延伸，也无法强制文档上的水平滚动。

然而，非常使用jQuery

非常简单

$(document).on('scroll', function () {
    $("#two").css('top', $(this).scrollTop());
});

这需要#two绝对定位。

http://jsfiddle.net/9AUbj/16/

Answer 3

我使用了此代码

$(window).scroll(function () {
    $("#one").css({
        left: $(this).scrollLeft()
    });
});

它在Chrome上完美运行，但是在Internet Explorer上，当我拖动水平滚动条时，固定内容开始闪烁：（

CSS如何修复元素以与页面水平滚动而不是垂直滚动？

3 个答案: