parallax fading one div into another with Skrollr

Question

I am trying to fade 3 (fullscreen) divs into one another as I scroll.

I have been trying to use Skrollr ( https://github.com/Prinzhorn/skrollr ) and it has kind of worked but with one weird issue.

When I scroll down the images fade but '.intro-bg' starts at the top of the page and then moves to about half way down the page. '.sign-up-bg' is fine and doesn't scroll it stays fixed to the top, and so does 'welcome-bg'. So it's just the middle one being a pain.

I created a fiddle to try replicate things http://jsfiddle.net/9HFd9/ it's not quite the same but there are scroll issues here too.

Here is the code:

HTML:

<div class="content">
    <div class="welcome">Welcome</div>
    <div class="intro">Intro</div>
    <div class="sign-up">Sign Up</div>
</div>
<div class="welcome-bg" data-0="opacity:1;" data-500="opacity:0;"></div>
<div class="intro-bg" data-500="opacity:1;" data-1000="opacity:0;"></div>
<div class="sign-up-bg" ></div>

Javascript:

skrollr.init({
    smoothScrolling: true,
    forceHeight: false
});

var maxWidth = $(window).width();
var maxHeight = $(window).height();

$(document).ready(function(){
    $('.welcome, .intro, .sign-up').css({
        width: maxWidth,
        height: maxHeight
    });
});

CSS

.welcome-bg, .intro-bg, .sign-up-bg{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:100%;
}

.welcome-bg{
    background: blue url('http://wallpicshd.com/wp-content/uploads/2013/06/Landscape-04-HD-Wallpaper.jpg') center center fixed;
    background-size:cover;
    z-index:-2;
}
.intro-bg{
  background: green url('http://www.hdwallpapers.in/walls/sunflower_landscape-wide.jpg') center center fixed;
  z-index:-3;
}
.sign-up-bg{
  background: red url('http://www.hdwallpaperstop.com/wp-content/uploads/2013/05/Beautiful-Landscape-Pictures-of-nature.jpg') center center fixed;
  z-index:-4;
}

Any ideas what might be wrong?

Answer 1

<div class="welcome-bg" data-0="opacity:1;" data-100p="opacity:0;"></div>
<div class="intro-bg" data-100p="opacity:1;" data-200p="opacity:0;"></div>

and add

 $( window ).resize(function() {
 var maxWidth = $(window).width();
 var maxHeight = $(window).height();
 $('.welcome, .intro, .sign-up').css({
        width: maxWidth,
        height: maxHeight
});   
});

Look: http://jsfiddle.net/58s7c1sf/