在滚动时获取元素与视口右侧之间的距离以更改div的宽度

Question

我有一个我无法解决的小问题。
我已经在Google上冲浪了一个多小时，但无法解决。 （我不太会使用Javascript）

是的。 我有一个水平滚动页面。 （未嵌入水平滚动的代码，让我们仅使用滚动条即可）。 我想有一个“起点” -DIV，宽度和长度为100％，包含图像。 该div的右侧将包含内容（可动态调整的内容量）。 现在，我希望该图像（在GIF中显示为“内容”）在DIV中居中。 滚动时，我希望div变小（除了div实际上没有移出视口外，它应该看起来像常规滚动一样）。 然后应在400px左右停止缩小，仅显示图像中心的一部分。
所以-GIF的图片1是通常的样子。 GIF的图片2是我希望它发生的方式。 当然，这应该以响应方式进行。 我已经完成了一些工作，并且我基本上知道如何去做，但是我对Javascript的解决可能太糟糕了。

到目前为止，这是我的方法。 -> jsfiddle

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

var windowsize = viewport - scrollVal;

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

如您所见，我基本上得到了视口的大小以及视口与div的偏移量（我认为是）。 然后，我从视口中减去了偏移量。 这是怎么回事：偏移量是从左侧滚动的距离，并且每次更改DIV宽度时都会更改。 据我所料，我将需要DIV右侧与视口右侧之间的距离。 但是我只是不能把头缠住它。

一些帮助将不胜感激！ 很长的文字对不起。

Answer 1

我自己解决了！ 这是更新的JSfiddle。 https://jsfiddle.net/04dn5x6g/2/

#contentdiv {
width:100vw;
height:100vh;
position: fixed;
background-color: black;
z-index:100;
}

#else {
position: absolute;
left:100%;
height:100vh;
display: inline-block;
white-space: nowrap;
}

这是固定的位置。

Answer 2

我不确定这是否是理想的结果，但是我已经做到了：

var contW = $("#contentdiv").width();
$(window).scroll(function(){
    var winPos = $(window).scrollLeft();
    var newW = contW - (winPos * 3); // change 3 to change the 'speed' of the overlap

    if(newW > 400) {
        $("#contentdiv").css('margin-left',winPos+"px");
        $("#contentdiv").width(newW+"px");
    }
});

该函数使用#contentdiv的宽度。 然后，该函数使用窗口的scrollLeft()位置（速度乘以3）使其重叠。

为了确保#contentdiv的左侧保持在原位，请添加一个额外的margin-left 。

它可能不是解决办法，但我希望它可以帮助你对你的方式。

更新小提琴

（注意：CSS更改为，请检查小提琴）