CSS:如何水平修复元素但不垂直修复？

Question

你可以在这里看到一个例子:http://alboard.free.fr/adrien/test.html

布局基于水平滚动(红色元素).但我希望修复顶部(蓝色元素).

如果用户调整视口大小,则会出现垂直滚动条.如果此时用户向下滚动,则红色元素将上升,而蓝色元素将保持固定.这会打破布局(红色元素与蓝色元素重叠).

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

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

Answer 1

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

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

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