jquery - 特定の高さで視差スクロールを開始

Question

Web サイトに視差スクロールを実装しようとしています。これはほぼ完璧に機能します。問題は、視差セクションをほぼ下部に配置したいということです。下にスクロールすると、次のように、背景画像としてさらに上に設定した画像があります。

写真は、灰色のセクションの開始点で既に停止しているはずです。以下を参照してください。

私のコード:

// Can also be used with $(document).ready() / $(window).load()
$(document).ready(function() {
    // Cache the Window object
    $window = $(window);

    $('section[data-type="background"]').each(function(){
    var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // window scroll Ends

    }); 

    }); 

HTML マークアップの下:

<section class="quote" id="quote-home" data-speed="4" data-type="background">
    <div class="container_12">
        <header class="grid_12 centered">
            <h1>
            The beginning of knowlegde
            <br>
            is the discovery of something 
            <br>
            we do not understand.”
            </h1>

            <span class="cross-x"></span>

            <h2>- Frank Herbert</h2>
        </header><!-- End header.grid_12 --> 

    <div class="clear"></div><!-- End div.clear -->
    </div><!-- End div.container_12 -->
</section><!-- End section#quote -->

<section id="twitter" class="alt">

そしてCSS：

#quote-home {
    height: 500px; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 100%; 
    position: relative; 
    background: url(../images/coffeescripthands.jpg) 50% 0 no-repeat;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}