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

当div到达窗口顶部时，减慢div背景图像的滚动速度

1 个答案: