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'
        });
    } 
});