在滾動時獲取元素與視口右側之間的距離以更改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更改為，請檢查小提琴）