Menu
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!
353
Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width. A note about CSS positioning. Element is always positioned relative to the screen. Element is positioned relative to the nearest parent container with a position attribute.
Set position: absolute; on the element that you want to position. Set position: relative; on the centered div so that it becomes a layer that you can position elements inside.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
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/
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With