Need a fixed positioned div inside an absolute positioned div

Question

I'm using the Snap.js plugin - (it allows you to create scrolling side drawers/panels).

It works by creating 3 absolutely positioned divs, one of which contains main content.

Is there a way to position a div fixed to the top of the window when it is itself inside the absolutely positioned div.

At the moment i'm just getting the fixed div to pin to the top of the absolutely positioned div, rather than to the top of the browser. When I scroll, the div remains fixed to the top of the main content, but not the window.

For example:

<div style="position:absolute;">

    <div style="position:fixed;top:0">
       <!-- some content which needs to be pinned to top of window -->
    </div>

</div>

At the moment i'm using javascript to track the scroll offset and manually adjust the top position of the child div, which is not ideal for performance.

Any help appreciated!

Answer 1

I've made a fiddle showing my javascript workaround - it jitters when scrolling in internet explorer, any ideas.

<div id="displayed-content" class="snap-content scrollable">
    <div><!-- regular content --></div>
        <div><!-- fixed content --></div>
    <div><!-- footer content --></div>
</div>

http://jsfiddle.net/bxRVT/