Question

hey guys,
i have a probably rather simpel problem:

my website has two layers:

1) a drag&drop navigation on top which should be positioned absolute, so scrolling doesn’t affect the bars.

2) a content area in the back behind the navigation which should be scrollable.

you can see what i mean right here: http://jsfiddle.net/Pghqv/

however now, i cannot click links in my content-area in the back. any ideas or solutions how i can still have the same position result and the links in the back are working?

thank you very much.

Answer 1

In your demo the only reason you can’t click the content behind the header is because it’s behind the header #navigation div. If you move it from behind the header #navigation div, with, for example, margin-top: 200px; then it works: JS fiddle demo.

---

Edited with regard to the need for the solution to be dynamic, and to the jQuery tag:

If the height of the #navigation div isn’t known in advance, then the following jQuery can be used instead of a concrete css declaration in the stylesheet:

$('#page-wrap').css('margin-top',$('#navigation').outerHeight());

JS Fiddle demo.