居中固定元素，但水平滚动答案

【问题标题】：Centering a fixed element, but scroll it horizontally居中固定元素，但水平滚动
【发布时间】：2011-07-12 03:45:30
【问题描述】：

在使其正常工作时遇到一些问题。请帮忙。

我想要一个固定在视口顶部的元素，当用户向下滚动页面时，它会保持在视口的顶部……很简单。如果窗口比 960px 窄，水平滚动条就会出现。如果窗口水平滚动，我希望这个固定元素内的内容随之滚动。

请查看演示，两个绿色框应始终对齐。缩小窗口并水平滚动，注意它们不再对齐。

如果没有 JavaScript，这可能吗？应该在 IE7+ 中工作，而不是在 IE6 中完全崩溃。

【问题讨论】：

【解决方案1】：

啊，有趣的问题。我认为没有 JavaScript 就无法实现。

position: fixed 表示元素相对于视口定位。你想要垂直的，但你不想要水平的。我认为在 CSS 中没有任何方法可以实现这一点。

【讨论】：

【解决方案2】：

您不能在溢出滚动内容上使用position:fixed。为此，您需要使用 JavaScript。我在Fixed header inside scrolling block 使用 jQuery 回答了一个类似的问题，其中一个 div 是固定的，即使内容通过溢出滚动。

在http://jsfiddle.net/VswxL/3/查看工作示例

【讨论】：

这个例子有效吗？我认为 OP 希望标题在垂直滚动时保持原位，但在水平滚动时与页面的其余部分一起移动。在这两种情况下，您的似乎都保持不变。（我在 Chrome 9 上。）
是的，它适用于所有浏览器。即使内容垂直或水平滚动，标题也将保持固定。假设这就是 OP 想要的。
这不是 OP 想要的。他希望它在垂直滚动时固定，但在水平滚动时移动。
我知道了。这是一个简单的修复。 jsfiddle.net/VswxL/4。我误解了这个问题
@Hussein：很容易做到，这样的视觉效果真的很难用语言来描述。不过那个 JS 应该真的很有帮助。

【解决方案3】：

简单：http://jsbin.com/awaqug/edit#javascript,html,live

由我稍作编辑，以使其更容易按照您的意愿实施。 jquery 代码不是我的...呵呵。这对我很有帮助，很快...

【讨论】：