I have a question about focus, z-index, and their relation to scrolling

Question

Visit here for an example: www.davepoyzer.com

My problem is, the top div (#topheader) sits above (via z-index) the scrolling div (#content). If you try scrolling with your mouse while the cursor is over #topheader, it wont scroll #content, which is below it. Is their anyway to fix this with javascript (the page already entirely relies on javascript)? I was thinking changing focus might do it, but I'm not very knowledgeable on focus.

Here's an idea, but I don't know if it's possible. Basically, when mouse is scrolled over one div (#topheader), it would be capture with javascript and scroll a different div (#content). Is this possible?

The current CSS is as is because of several different factors. I really don't think changing the CSS is going to work. For example, you can't click on the nav links if you put #topheader under #content.

Any ideas or suggestions would be awesome! Thanks for reading!

Answer 1

I guess you could bind code to the scroll event of the header and the code will scroll the content div. Here is a jQuery reference. http://api.jquery.com/scroll/