将元素固定到顶部

【问题标题】：Fixing an element to the top将元素固定到顶部
【发布时间】：2011-04-22 07:33:41
【问题描述】：

我有一个固定在顶部 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>

【问题讨论】：

我假设你需要overflow-x 或overflow-y。你的问题不是很清楚。
每当我滚动网站时，我都会尝试让第一个元素（位置固定的元素）向左或向右（y 轴）滚动。
我不认为纯CSS可以做到这一点，javascript是满足您需求的解决方案。
那么 - 我怎样才能用 JS 做到这一点？有什么建议吗？
试试position:absolute;top:0px;float:left;

标签： html css

【解决方案1】：

这是一个了不起的问题，CSS3 没有给你答案。没有办法在一个轴上固定一个元素，而在另一个轴上则不行。

imo 的理想解决方案是提供 CSS3 属性，例如 position:fixed-x 和 position:fixed-y。但是没有这样的东西。

我知道拥有这种非常有用的行为的唯一方法是编写 JavaScript 函数来处理 setInterval() 事件；轮询每个事件的当前 X 或 Y 滚动位置；并且，如果您要修复的轴上的滚动位置发生了变化，则更改固定元素的滚动位置以进行补偿，即将其移回它所属的位置。

我实际上使用这种方法并且它有效，但它很痛苦。我的代码每十分之一秒轮询一次 X 和 Y 滚动位置，这通常足以让您看起来不太生涩。

您可以在工作中看到解决方案in this long table。缩小窗口，使水平滚动条出现，左右滚动表格。列标题随表格移动，但您可以垂直滚动表格主体并且列标题保持不变。

【讨论】：