how to let the container scroll down from top to bottom
<p>i wanna implement this html effect like this:</p>

<p><a href="https://i.stack.imgur.com/Cglcf.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Cglcf.gif" alt="change image by scroll"></a></p>

<p>from <a href="http://www.porsche.com/microsite/mission-e/china.aspx" rel="noreferrer">this website</a></p>

<p>image show from top to bottom with scrolling, pretty cool.</p>

<p>but my implement is :</p>

<p><a href="https://i.stack.imgur.com/H8biC.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/H8biC.gif" alt="my implement"></a></p>

<p><a href="http://codepen.io/devbian/pen/dXOvGj" rel="noreferrer">http://codepen.io/devbian/pen/dXOvGj</a></p>

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

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

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

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




* {
  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();
})
</code></pre>

<p>this is from bottom to top.</p>

<p>how can i change the image from top to bottom with scrolling?</p>