Scrolling with fixed div layout and min-widths

Question

I\'ve been trying to layout this page, but for the life of me, can\'t seem to get it to wor

Answer 1

With CSS:

In short, it is not possible with position: fixed;.

As already mentioned by other answers, it is not possible to force a fixed div to scroll, because the div becomes positioned in relation to the viewport (thanks @Netsurfer for digging up the link), and there is no way for us to manipulate this.

---

Alternative 1: You could set overflow of the body to hidden (thereby hiding browser scrollbars) and add a new wrapper div that fills the entire viewport by using viewport units (vh and vw). You would then nest your titlebar and content divs within this wrapper and give it a horizontal scrollbar. Then you would absolutely position your titlebar in relation to a new titlebar wrapper div, while wrapping your content in a div with 100% (minus the titlebar) height and a vertical scrollbar.

See jsfiddle example.

This approach is rather ugly when you consider all the wrappers... also, when you apply a min-width of 1024 pixels to the content, the vertical scrollbar will move out of the viewport when viewed on smaller screens (as you mentioned in your post). You could position the scrollbar on the left side using direction: rtl;, but the scrollbar will still go out of view when scrolling to the right.

See jsfiddle example with scrollbar on left.

All in all it is not a great solution which would need to be heavily tested for cross-browser support any time anything is changed. Currently it works in Chrome 33 (which I am using) and I have also succesfully tested it in Firefox 27, Internet Explorer 11 and Opera 19. Safari 5.1 (windows) does not like it, but it should work on the newer Mac versions. For Safari 5.1 you can try changing to % heights and dropping the css calc() method, but you'll probably have problems scrolling the entire content.

---

Alternative 2: Wait. In the future you may be able to use position: sticky; to achieve exactly what you want (assuming this new property ever gains complete browser support). You can see it in action with chrome if you enable the "Enable experimental Web Platform features" option under "chrome://flags/".

See jsfiddle example.

---

With jQuery:

With jQuery this becomes a trivial task if you forget about position: fixed;, and does not require much code. All you would have to do is position the titlebar div absolutely and then tell it to move every time the window is scrolled:

$window.scroll(function() {
    $(".title").css('top', $window.scrollTop() + "px");
});

Using .css() is slightly faster than using .offset() (see benchmark tests). If JS is disabled the titlebar will simply scroll out of view.

See jsfiddle example.

---

Considering how easy this is with jQuery, I would suggest using that approach.