jQuery - parallax - update background position correctly

Question

Goal

This is a follow-up question to this one.

1. I'm trying to create a parallax scrolling effect.

2. The parallax-container are implemented like so:

   < div class="parallax slide-1" >< /div >

The parallax-effect successfully starts, when a container is scrolled into view and stops, when it has left the view.

Problem

Unfortunately when I place a parallax-container further down on a page the effect starts with the backgroundposition in the wrong place.

I understand why this problem shows up, but am not sure how to solve it.

What I need is basically this:

1. Start the effect once a parallax-container is scrolled into view: works.
2. Stop the effect once it has left the view: works.
3. Only move the backgroundposition by the distance scrolled since it has entered the view. Not the distance scrolled relative to the top of the page.

Fiddle over here

For the parallax-container further down the page:

You can see the edges of the images. I'm trying to find a solution for that.

Thoughts

So far my attempts where based around the idea to get the distance of a parallax-container to the top of the page only once (dont update it with each scroll) and implement it in the calculations.

But I cant seem to get it to work properly. Am I missing something?

Some further clarification:

1. There can be multiple parallax-container on any page.

2. Each can have their own background image set. (in the css)

3. I dont know how many parallax-container will be on a page.

4. I dont know where they are placed.

5. Only those that are visible move.

Code

Only the relevant parts:

$(window).scroll(function(){ // Bind window scroll event
    $( ".parallax" ).each(function() {
        if( $( this ).is_on_screen() ) { // Check if element is visible on screen after DOM loaded

            // ANIMATE PARALLAX EFFECT
            // If Parallax Element is scrolled into view do...

            // Variables
                var speed     = 2.5;
                var calc      = (-window.pageXOffset / speed) + "px " + (-window.pageYOffset / speed) + "px";
                var container = $( this );

            // Function
                container.css({backgroundPosition: calc});

        } else {
            // ...otherwise do nothing
        }
    });
});

Answer 1

I was actually going to put an edit on my old post, but since you made a new one, I'll add it here.

Seeing as you want to get granular with your parallax (ie. 2 are in view, but 1 has only moved 10px vs 30px), what you could do is store the speed option inside of your object, so that way, the speed movement will become independant. As so:

$(window).scroll(function(){ // Bind window scroll event
    $( ".parallax" ).each(function() {
        if( $( this ).is_on_screen() ) { // Check if element is visible on screen after DOM loaded

            // ANIMATE PARALLAX EFFECT
            // If Parallax Element is scrolled into view do...
            // set a starting speed for each this:
            // $(this).speed = 2.5;
            //
            // Variables

                var calc      = (-window.pageXOffset / $(this).speed) + "px " + (-window.pageYOffset / $(this).speed) + "px";
                var container = $( this );

            // Function
                container.css({backgroundPosition: calc});

        } else {
            // ...otherwise do nothing
        }
    });
});

Edit: As discussed in the comments, to set the speed, try the following:

$(document).ready(function () {    
    $.fn.is_on_screen = function () {
        //..do your on screen stuff
    };
    $( ".parallax" ).each(function() {
       $(this).speed = 2.5;
    };
});