CSSの背景のスクロール効果

Question

私はヒーロー/ヘッダーが2つの部分に分かれていて、情報のある左側のサイトと右側のグラフィックに分かれています。右側（画像）はシンプルな視差効果があると思われるので、私はbackground-attachment: fixed;としました。

グラフィックの下部が次のセクションに当たったときに、background-attachmentプロパティを変更する必要があります。そのため、picture'llはそれ以降の残りのテキストを上にスクロールします。

ここに私の意図をもう少し明確にするかもしれないフィドルがあります。

https://jsfiddle.net/fg67ho2L/1/

期待通りに動作し、これはとても右側（画像）を実現する方法はありますか？ありがとう。

Answer 1

右側のheightのプロパティを変更して、それを達成したい場合は左側に残さないようにします。

Answer 2

スクリプトは私にエラーを与えるので、私は、私はbackground-attachmentが、transformsを使用しないことを決め

var abouttop = document.getElementById("about").getBoundingClientRect().height; 

を変更しました。 さらに、テキストコンテナにid="about"がありません。 私はJQueryを使用していないので、ここにいくつかの作業用のjs（混乱のために申し訳ありません）：

var pos = 0; 

var imageControl = function(e) { 
    var scrollposition = document.documentElement.scrollTop; 
    var abouttop = document.getElementById("about").getBoundingClientRect().height; 
    var scrollBottom = jQuery(window).scrollTop() + jQuery(window).height(); 
    var image_height = document.getElementById("image").getBoundingClientRect().height; 
    // console.log(scrollBottom); 

    if (scrollBottom < abouttop) { 
    pos = scrollposition; 
    } else if (scrollBottom > abouttop) { 
    //pos = abouttop-image_height; 
    } 
    console.log(pos); 
    document.getElementById("image").style.transform = "translateY(" + pos + "px)"; 
}; 

jQuery(window).scroll(imageControl);