Hide scrolling content under fixed transparent hea

Question

Lets say I have a background image, a fixed header image with transparent parts, a content div with a semi-transparent background and dynamic height in a traditional header/content/footer layout.

The effect I'm trying to achieve: scrolling background and content under a fixed header (with content hidden and background showing).

I've read a bunch of related topics, such as Hide Scrolling Content Under Transparent Header etc. But they deal with situations where the background can be fixed too. Mine has to be scrollable.

I managed to get what I need by adding the same background image to a wrapper div of the header image div and scrolling it with jQuery .scrollTop() on window scroll event.

Reference: jsbin Example
Reference: jsFiddle Example

The problem of this method is pretty bad sync (some lag, tearing) in all browsers not named Firefox.

To clarify: The height of content will be dynamic. 10000px I just picked for the example. I expect it to reach that quite often though, sometimes more (AJAX feeds), and on some pages it can be close to 0. That's why I'm syncing .height() too. Keep in mind that footer div at the bottom is under the content div.

And I think there has to be a better way. Any suggestions?

Answer 1

Couldn't you just use a positioned scroll pane or scroll area to scroll your dynamic content, simply positioning it right under your fixed header?