Geek Answers Handbook

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

Here you can see an example: http://alboard.free.fr/adrien/test.html

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

If the user resizes the viewport, a vertical scroll bar will appear. If at this moment the user scrolls down, the red element will grow while the blue element remains fixed. This violates the layout (the red element overlaps with the blue element).

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

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

+5
source share
2 answers

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

Expand the two lines of the div inside the parent div. Your horizontal scrollbar should be from your bottom nested div (your top nested div should not have a horizontal scrollbar). Your vertical scrollbar will be from your parent div (your nested divs will not have vertical scrollbars).

, - , div. - , div ( div ).

+1

# , onscroll javascript .

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

, . , , CSS.

0

More articles:


All Articles