CSS: How to fix an element horizontally but not vertically?

Question

You can see an example here: http://alboard.free.fr/adrien/test.html

The layout is based on horizontal scrolling (the red element). But I want the top part to be fixed (the blue element).

If the user resizes the viewport, a vertical scrollbar will appear. If at this point the user scrolls down, the red element will go up while the blue element will remain fixed. This breaks the layout (the red element overlaps with the blue element).

Is it possible to make the blue element fixed horizontally but scrollable vertically?

I know there are javascript solutions based on onscroll. But there's always a latency between the moment the user scrolls and the moment the element's position adapts to the new offset.

Answer 1

Unless you have very complicated content inside your #fixed-element, a javascript onscroll handler would work just fine.

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

Give it a try and see if it works for your content. As Mike said, I don't think there is a CSS only way to do this.

Answer 2

Without using JavaScript, you can use nested divs with overflow properties:

Nest two rows of divs inside a parent div. Your horizontal scrollbar should be from your bottom nested div (your top nested div should have no horizontal scrollbar). Your vertical scrollbar will be from your parent div (your nested divs will have no vertical scrollbars).

Then, if someone scrolls vertically, both nested divs will scroll. If someone scrolls horizontally, only your bottom nested div will scroll (the top nested div will appear fixed).