Child div as viewport for scrollable parent? - css

Question

This might explain my question a bit better:
I need one child div positioned on top of the other so that the last-child is only showing around the edges, but the two child divs need to scroll together and keep the background of the first-child div static. This mesa that the viewport would be the first-child, but the content of the first and second child would have to scroll within the container so they can scroll together., with the first-child being the viewport.
I have the following HTML structure:
<div class="container">
<div class="text">
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
</div>
<div class="bars">
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="b"></div>
<div class="a"></div>
</div>
</div>
The bars extend to the width of the page, and the text div is overlaid on top of them, with a margin around it. I position each bars div so that they match up at the same horizontal level with the visually corresponding row.
The text div is positioned to be x pixels from each side, so that there is a margin around it. This way, you can see the ends of the bars below it.
The markup is easy, but I can't figure out the CSS for this...
text is positioned absolutely, so that it can extend to the bounds of the page with a margin. This is fine if the content inside it stays within the bounds, but it does not in this case.
This is all very hard to explain, but basically, here's the problem: I set container to overflow:scroll because I need the bars to scroll with the rows. Since text has a background image, and is positioned so that you can just see the ends of the rows beneath it, it has to be position:absolute. This doesn't work, however, when the content exceeds the bounds of text. I can't add the background image tocontainerbecause it would cover the ends of thebars`.
Does that make sense? No? Here's a jsFiddle: http://jsfiddle.net/charlescarver/BskaP/2/
Does it still not make sense? Here's a picture:
Any ideas? Ask me some questions so I can explain this better.

Answer 1

You don't need a lot of the css that's there -- for example the .container. If I understand correctly (and I'm not 100% sure I do) you'd like a image on the .text div which remains fixed while the rest of the page -- bars and text scroll.
You cannot put the image on the text div as it will scroll; rather, I suggest putting the image on each .row with a position: fixed as well as using padding-bottom:20px instead of the margin, so that there appears to be an image behind all of the rows and the effect is continuous. That will give you the effect I think you're after
http://jsfiddle.net/BskaP/5/

Answer 2

You can use jQuery's scrollTop() function to get an elements position based on scroll. Coupled with a scroll() event, you should be able to sort something out.
So put something in your scroll event to offset the position of your rows and text by the value of scrollTop().
scrollTop() : http://api.jquery.com/scrollTop/
scroll event : http://api.jquery.com/scroll/
My initial thoughts was to avoid JavaScript by combining the rows and text elements together and fake the rows being behind the text... but given your specific situation I couldn't come up with anything...

Answer 3

You should add overflow:auto to row. Here is a jsfiddle that proves it works: http://jsfiddle.net/BskaP/3/
I added an extra long row to it for an example.
I don't know if this is what you want, but I think it is.