This is probably best illustrated with an example, so: example
(Click the "Information Architecture" header to fire the effect)
The problem I have is this:
The light grey content box, with the dark grey header inside it, should slide into and out of visibility - which it's doing.
However, also I need the blue background image on the header bar to overlap the dark grey content header.
The way I've got this at the moment, I've simply used a negative topmargin on the content box to move it up, and z-index on that and the header bar to move it underneath. This does the job while everything is static. But while the animation is... animating, the effect is lost - the dark grey is no longer visible underneath the blue header image.
I'm not really sure what's causing this, whether its root is a CSS or JS issue. But I'd really appreciate any suggestions....