getting distance between element and right side of viewport to change div's width while scrolling

I have a little problem I can't solve.

I've surfed google for over an hour and I just can't work it out. (I'm not very good at Javascript)

So yeah. I have a horizontal scrolling page. (Code for horizontal scrolling not embedded, let's just work with the scrollbar). I want to have a "starting-point"-DIV with 100% width & length, containing an image. To the right of that div there will be content (a dynamically adjustable amount of content). Now, I want that image (displayed as "content" in the GIF) to be centered inside the DIV. As I scroll, I want the div to become smaller (which should look just like regular scrolling, except the div is not actually moving out of the viewport). At around 400px it should then stop shrinking, showing just a part of the image's center.

So - image 1 of the GIF is the way it usually is. And image 2 of the GIF is the way I want it to happen. This should of course work responsively. I've done some work already, and I basically know how to do it, but I'm probably just too bad at Javascript to solve it.

Here's my approach so far. -> jsfiddle

var scrollVal = Math.max(window.pageXOffset,0); /* THIS IS WRONG */
var viewport = window.innerWidth;

var windowsize = viewport - scrollVal;

$("#contentdiv").css({"width" : windowsize + "px"});

As you can see, I basically just got the size of the viewport and the offset between (what I thought was) the offset of the viewport and the div. Then I subtracted the offset from the viewport. What's wrong here: The offset is the distance scrolled from the left, and that changes every time the DIV width is altered. I would need the distance between the right side of the DIV and the right end of the viewport, as far as I could guess. But I just can't wrap my head around it.

Some help would be greatly appreciated! I'm sorry for the long text.