CSS：如何水平而不是垂直固定元素？答案

【问题标题】：CSS: How to fix an element horizontally but not vertically?CSS：如何水平而不是垂直固定元素？
【发布时间】：2009-09-25 18:27:50
【问题描述】：

您可以在此处查看示例：http://alboard.free.fr/adrien/test.html

布局基于水平滚动（红色元素）。但我想固定顶部（蓝色元素）。

如果用户调整视口大小，将出现一个垂直滚动条。如果此时用户向下滚动，红色元素将向上，而蓝色元素将保持固定。这会破坏布局（红色元素与蓝色元素重叠）。

是否可以让蓝色元素水平固定但垂直可滚动？

我知道有基于 onscroll 的 javascript 解决方案。但是在用户滚动和元素位置适应新偏移之间总是存在延迟。

【问题讨论】：

我不知道在没有动态脚本的情况下使用 CSS2 的方法。

标签： javascript html css

【解决方案1】：

不使用 JavaScript，您可以使用具有溢出属性的嵌套 div：

在父 div 中嵌套两行 div。您的水平滚动条应该来自您的底部嵌套 div（您的顶部嵌套 div 应该没有水平滚动条）。您的垂直滚动条将来自您的父 div（您的嵌套 div 将没有垂直滚动条）。

然后，如果有人垂直滚动，两个嵌套的 div 都会滚动。如果有人水平滚动，则只有您的底部嵌套 div 会滚动（顶部嵌套 div 将显示为固定）。

【讨论】：

【解决方案2】：

除非您的 #fixed-element 中有非常复杂的内容，否则 javascript onscroll 处理程序可以正常工作。

  <script type="text/javascript">
    function handleScroll()
    {
        document.getElementById('fixed-element').style.top = "-"+document.body.scrollTop+"px";
    }
  </script>

试一试，看看它是否适用于您的内容。正如 Mike 所说，我不认为只有 CSS 可以做到这一点。

【讨论】：