渲染问题与视差效果

Question

我想创建一个视差效果使用window.onscroll和scrollTop，但我一直运行到渲染问题，看起来像我在视口渲染后收到onscroll。正如你可以看到from this example（附带代码），箱子的运动是不稳定的和波涛汹涌。

该行为在所有基于WebKit的浏览器和FireFox中都是相同的。

的JavaScript

$(document).ready(function() { 
    $('.box').each(function() { 
    $(this).data('y', $(this).offset().top); 
    }); 
}); 

$(window).scroll(function() { 
    var scroll = $(this).scrollTop(); 

    $('.box').each(function() { 
    var parallax = $(this).data('parallax'); 

    if (parallax) { 
     var y = $(this).data('y'); 
     var offset = (scroll - y) * parallax; 

     $(this).css('-webkit-transform', 'translateY(' + offset + 'px)'); 
    } 
    }); 
}); 

标记

<div class="red box">Lorem ipsum dolor sit amet.</div> 
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div> 
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div> 

Answer 1

只是想知道，如果它使用预制的一个，而不是 “重新发明” 轮是值得？

http://joelb.me/scrollpath/