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:


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.

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:


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".

Perhaps anyone could help me and tell me on the Basis of the JSFIDDLE how I could realize it.

Thank you!