定时jQuery背景视差效果

Question

我制作了jQuery视差，当它在页面顶部时可以正常工作，但是当我将其移动到页面底部时，当我向下滚动它时，它已经完全脱离视图了。

在下面，我制作了3个视差图像均匀地分布在页面上（这些图像之间的元素具有相同的高度），因此我可以安全地将每个下一个视差图像调整为比上一个慢2倍，然后在我滚动到页面末尾时或多或少地均匀我相信我可以更精确地计算时间

但是，如果我增加了第一和第二个视差图像之间的间隔，那么时序将不得不改变，是否有更好的方法来使其工作？

我认为可能性之一是知道从页面顶部到视差图像顶部的距离（例如600px），然后只有当滚动条达到300px时，我们才能开始对第一幅图像进行视差，但这是这样做的正确方法吗？

JSFiddle： http : //jsfiddle.net/TkmLy/2/

jQuery的

$('section').scroll(function(){
    var x = $(this).scrollTop();
    $(this).find(".bg1").css('background-position','0% '+parseInt(-x/2)+'px');
    $(this).find(".bg2").css('background-position','0% '+parseInt(-x/4)+'px');
    $(this).find(".bg3").css('background-position','0% '+parseInt(-x/6)+'px');
});

的CSS

<style>
    html, body{
        height:100%;
        min-height:100%;
        margin:0;
        padding:0;
    }

    section {
        overflow-y:scroll;
        height:100%;
    }

    .bg1{
        width:100%;
        height:300px;
        background: #cccccc url(http://demo.rocknrolladesigns.com/wp/jarvis/callouts/wp-content/uploads/2013/08/parallax4.jpg) no-repeat fixed 0 0; 
    }

    .bg2{
        width:100%;
        height:300px;
        background: #cccccc url(http://demo.rocknrolladesigns.com/wp/jarvis/callouts/wp-content/uploads/2013/08/slider2.jpg) no-repeat fixed 0 0; 
    }

    .bg3{
        width:100%;
        height:300px;
        background: #cccccc url(http://demo.rocknrolladesigns.com/wp/jarvis/callouts/wp-content/uploads/2013/08/sunset-hair.jpg) no-repeat fixed 0 0; 
    }

 </style>

html

<section>

 xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>

 <div class="bg1"></div>

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>

<div class="bg2"></div>

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>

<div class="bg3"></div>

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>

</section>

Answer 1

对于视差背景图像，您需要background-attachment: fixed;

那么，计算视差背景图像的方法就更复杂了，我建议只在这里使用该库。 当前，大量主题和模板都在使用它。

https://github.com/IanLunn/jQuery-Parallax/