Сроки jquery фоновый эффект параллакса

Я сделал параллакс jQuery, который отлично работает, когда он находится поверх страницы, однако, когда я перемещаю его в нижнюю часть страницы к тому времени, когда я прокручу вниз, он уже полностью отключен от представления.

Ниже я сделал 3 изображения параллакса, равномерно распределенных на странице (элементы между этими изображениями имеют одинаковую высоту), поэтому я могу безопасно настроить каждое следующее изображение параллакса в два раза медленнее предыдущего, а затем по времени я прокручиваю до конца страницы его более или менее я уверен, что я мог бы рассчитать сроки более точно

Однако, если я увеличиваю расстояние между первым и вторым изображениями параллакса, тогда время должно измениться, есть ли лучший способ заставить его работать?

Я думаю, что одна из возможностей - это знать расстояние от верхней части страницы до вершины изображения параллакса (например, 600 пикселей), тогда только когда полоса прокрутки достигает 300 пикселей, мы можем начать параллаксировать первое изображение, но это правильный способ сделать это?

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>