固定元素到顶部

Question

我有一个元素固定在x，y轴的顶部。是否有任何方法可以将其仅固定在x轴上？例如，这样我就可以将固定元素向左或向右滚动。

当前代码：

<div style="position:fixed;top:0;width:2000px;">
The fixed header element
</div>
<div style="overflow:auto;width:2000px;">
the scrollable content element
</div>

- user684202

---

我假设你需要使用 overflow-x 或 overflow-y。但是你的问题不是很清楚。 - Khez

我正在尝试使第一个元素（具有固定位置的元素）在滚动网站时向左或向右滚动（y轴）。 - user684202

我认为纯CSS无法做到这一点，JavaScript是满足您需求的解决方案。 - Michael Bai

那么 - 我如何用JS实现这个功能？有什么建议吗？ - user684202

尝试使用 position:absolute;top:0px;float:left;。 - xkeshav

是的，该元素会定位到页面顶部，但并非固定在顶部。例如，如果我向下滚动页面，则该元素会消失。 - user684202

Answer 1

这是一个很棒的问题，但CSS3无法回答。没有办法在一个轴上固定元素而不在另一个轴上固定。

我认为理想的解决方案是提供像 position:fixed-x 和 position:fixed-y 这样的CSS3属性。但是这种属性并不存在。

我所知道的唯一方法是编写JavaScript函数来处理 setInterval( ) 事件；在每个事件中轮询当前的X或Y滚动位置；如果您想要固定的轴上的滚动位置已更改，则将固定元素的滚动位置改变以进行补偿，即将其移回到原来的位置。

我实际上使用了这种方法，它确实起作用，但很麻烦。我的代码每十分之一秒轮询一次X和Y滚动位置，这通常足够平滑。

您可以在 这个长表格 中看到该解决方案的效果。缩小窗口以使水平滚动条出现，然后滚动表格左右。列标题随表格移动，但您可以垂直滚动表格主体，而列标题保持不变。

- Pete Wilson