css/jquery: scroll limit with nested scoll and hid

Question

Here is an example of what I want to do:

http://jsfiddle.net/bnsadku9/1/

I have a fixed header that is coverred by a div below when scrolled. At a fixed height the scroll stops and the div continues to scroll inside itself (to reveal the content).

There are are some minor problems with my current implementation:

1) I don't want to inner scroll bar to show up. I tried playing aroung with position and margin instead of overflow:scroll or with switching the z-position but that didn't work or hid the drop shadow. I also tried the trick with a wrapper div that is supposed to hide the scrollbar, but that doesn't seem to work for some reason:

http://jsfiddle.net/bnsadku9/2/

        var vcontentWidth = document.getElementById("content").scrollWidth;
        document.getElementById("wrapper").style.width = vcontentWidth + "px";

This is supposed to change the size of the wrapper to hide the scrollbar. I tried different position values too but neither works.

2) When the bottom of of the inner div is reached the scroll jumps to the top.

3) The focus of what to scroll is not always working (in Firefox at least).

The question is: How to fix those problems OR how to implement the required functionality in a different way.