Position image in parallax scrolling

Question

I am a noob when it comes to jQuery so please be patient with me :-)

I have created (with some internet help) a parallax page.
The content of that page get's loaded dynamically from a WordPress environment.

The problem is the following:
In my example I use three pages. Two with a background and one without
1. Background
2. No background
3. Background

The problem is that the third page that contains a background starts scrolling while the viewport isn't even visible.
So by the time the user sees the third part, most part of the image is allready gone.

Hope I make some sense.

Here is the link of the tut I followed

I found that:
$('.my_class').parallax("50%", 0.2); handles the speed of the scrolling.

If I tune it up it will work for three pages but the effect is almost gone...

This dynamically loads the page:

<?php $args = array(
    'sort_order' => 'asc',
    'sort_column' => 'menu_order',
    'child_of' => $post->ID,
    'post_type' => 'page',
    'post_status' => 'publish'
    ); 
    $pages = get_pages($args); 
    foreach ($pages as $page){
        $thumbnail_object = get_post(get_post_thumbnail_id($page->ID));
        echo '
        <div class="my_class" style="background:url('.$thumbnail_object->guid.') no-repeat center center fixed;-webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;margin: 0 0 5% 0;">
        <div class="wrap_1280">';
        echo apply_filters( 'the_content', $page->post_content );
    echo '</div>    
    </div>';

    }

?>

I load the background image inline because that way I can dynamically change the image to whatever the user uploads.

Any ideas how I can fix this?

---------- UPDATE-----------
Here is what I placed in the body tag

<script>
function isElementInViewport (el) {

//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
}

var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight ||   document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)   /*or $(window).width() */
);
}
function onVisibilityChange(el, callback) {
var old_visible;
return function () {
    var visible = isElementInViewport(el);
    if (visible != old_visible) {
        old_visible = visible;
        if (typeof callback == 'function') {
            callback();
        }
    }
}
}

var handler = onVisibilityChange(el, function() {


jQuery('.full_width_parallax_scroll').parallax("50%", 0.8);

jQuery(window).scroll(function() {
if($(this).scrollTop() > 150) {
    if(!$('main-menu').hasClass('floating')) {
       $('.main-menu').addClass('floating');
    }
} else {
    jQuery('.main-menu').removeClass('floating');
}
});

});


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler); 

/* //non-jQuery
if (window.addEventListener) {
addEventListener('DOMContentLoaded', handler, false); 
addEventListener('load', handler, false); 
addEventListener('scroll', handler, false); 
addEventListener('resize', handler, false); 
} else if (window.attachEvent)  {
attachEvent('onDOMContentLoaded', handler); // IE9+ :(
attachEvent('onload', handler);
attachEvent('onscroll', handler);
attachEvent('onresize', handler);
}
*/
</script>