jquery - ウィンドウの上部に到達すると、div の背景画像のスクロールが遅くなります

Question

div がウィンドウの上部に到達したら、div の背景画像を div 内のコンテンツよりも遅くスクロールしたいと思います。私が話していることを具体的に実行するオンラインのオフハンドの例を見つけることができません。

これは jQuery で実行できると想定していますが、jQuery はあまり得意ではないので、具体的にはどうなるかわかりません。

Answer 1

必要なタスクを達成するコードをまとめました。

これが私のhtmlです：

    <div class="post" id="post-1">

        <div class="post-background" id="post-background-1"> </div>  

        <div class="post-content" id="post-content-1"  ></div>

    </div>

    <div class="post" id="post-2">

        <div class="post-background" id="post-background-2"> </div>  

        <div class="post-content" id="post-content-2"  ></div>

    </div>

    <div class="post" id="post-3">

        <div class="post-background" id="post-background-3"> </div>  

        <div class="post-content" id="post-content-3" ></div>

    </div>

</div>

CSS:

 .post {position:relative;}
 .post-background {position:absolute; top:0; left:0; width:100%; height:100%}
 .post-content {position:absolute; top:0; left:0;}

そしてjQuery：

jQuery(window).scroll(function () {
    var top = jQuery('.post').offset().top - jQuery(document).scrollTop();;
    if (top < 0){
        var target = jQuery('.post').attr('id').match(/[\d]+$/);
        jQuery('#post-background-' + target +'').css( {
            'top' : (top/2.5)+"px", 'position' : 'fixed'
        });
    }
    if (top > 0){
        var target = jQuery('.post').attr('id').match(/[\d]+$/);
        jQuery('#post-background-' + target +'').css( {
            'top' : "0px", 'position' : 'absolute'
        });
    } 
});