how to let the container scroll down from top to bottom

i waa implement this html effect like this:

from this website

image show from top to bottom with scrolling, pretty cool.

but my implement is :

http://codepen.io/devbian/pen/dXOvGj

<div class="container container0">
  <img src='http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-01.jpg' class='fixed'/>
</div>

<div class="container container1">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-02.jpg" class="moveable">
</div>

<div class="container container2">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-04.png" class="moveable">
</div>

<div class="container container3">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-05.jpg" class="moveable">
</div>




* {
  padding: 0;
  margin: 0;
}

body{
  min-height:2000px;
}

.container {
  overflow: hidden;
  padding: 10px;
  position: relative;
  min-height: 300px;
}

.container img{
  width:100%;
  height:300px;
}

/* .container0 {
  background-color: #e67e22;
}
.container1 {
  background-color: #ecf0f1;
}
.container2 {
  background-color: #f39c12;
}
.container3 {
  background-color: #1abc9c;
} */

.fixed {
  position:fixed;
}
.moveable {
  position:absolute;
}


$(function() {
  function setLogo() {
    $('.moveable').each(function() {
    $(this).css('top',
      $('.fixed').offset().top -  $(this).closest('.container').offset().top
    );
  });
  }  
  $(window).on('scroll', function() {
     setLogo();
  });
  setLogo();
})

this is from bottom to top.

how can i change the image from top to bottom with scrolling?