Hello,

I want to implement something Special onto my site, but I don't know how to do it.
On my site I use a big Header Image. I have made a small sketch:

http://s1.directupload.net/images/130615/lmsvok5s.png

On a page view I want to scroll to a defined Position. On the sketch above I have set for example a value of 30% height.
My site is full-responsive - The height and width of the Header Image will get scaled automatically.

Code:
img {
    max-width: 100%;
    height: auto;
}
Therefore I can't use something like "scroll to 200px ..." because the height of the Image varies.
My english is not the best, but I hope you understand the "challenge".
I also have created a mock-up how it should look like:

http://s7.directupload.net/images/130615/zcq9ndca.jpg

I don't have experience with Javascript.
I think also Facebook uses the same technique, when the user-Profile is beeing shown. Not the full profile-banner is visible - Only the bottom-part of the Image.

I have created a small example at "JSFIDDLE".

http://jsfiddle.net/tomahawx/MMgXu/161/
Perhaps anyone could help me and tell me on the Basis of the JSFIDDLE how I could realize it.

Thank you!