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

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 元素重新定位为始终显示在屏幕上。此外，#one 应该是 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 上，当我拖动水平滚动时，固定内容开始闪烁:(