Imagine having a background image, fixed header with transparent areas, a content div with semi-transparent background, and dynamic height in a traditional header/content/footer layout.
The desired effect is to have the background and content scroll under the fixed header, where the content remains hidden and the background visible.
While browsing through various resources like the discussion on Hiding Scrolling Content Under Transparent Header, I found solutions that catered to fixed backgrounds. However, my design requires a scrollable background.
I was able to achieve this by incorporating the same background image into a wrapper div for the header image and using jQuery's .scrollTop() to control the scrolling on window scroll events.
View the examples here: jsbin Example
Reference: jsFiddle Example
A major issue with this method is sync problems (lag, tearing) across all browsers except Firefox.
To clarify: The content height will vary dynamically, as shown by the 10000px example chosen. There are cases where it may exceed this length due to AJAX feeds, while other pages could have minimal content nearing 0. It’s important to note that the footer div appears beneath the content div.
I believe there must be a more efficient approach. Any suggestions?