title: Image animate down javascript (no jQuery)
body: <p>I know how to fix the animation that goes down only when the image is showing up in the window with jQuery, but now I want to do that with JavaScript. Struggling with that. The image must be fluently go down (+50px for 1.6 seconds). Have googling around, but most of them are done with jQuery I suggest and that is not what I want. Furtermore the animation should start when the scrollTop is between 600px and 800px. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function scrollFunction() {
   var animate = document.getElementById("picture");
   var position = 0;
      var top = 0;
   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   if(scrollTop &gt; 600 &amp;&amp; scrollTop &lt; 800){
    position++;
    animate.style.top = position + "50px";
   } else {
    stop();
   }
  }
  
  function stop() {
   clearTimeout(animate);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#picture {
   width: 100%;
   height: auto;
   top: -5px;
   position: relative;
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-12 col-xs-12"&gt;
          &lt;h1 class="responsive-h1"&gt;Mi&lt;span class="logo-orange"&gt; Pad2&lt;/span&gt;&lt;/h1&gt;
              &lt;p class="edition-title above-text-black"&gt;Black Edition&lt;/p&gt;
          &lt;img src="Img/picture.jpg" id="picture"/&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>