title: Changing HTML img src on scroll
body: <p>How can I change an image dependent on scroll height with the image inside of the html?</p>
  
  <p>Current</p>
  
  <pre><code>&lt;div id="astronaut"&gt;
                  &lt;img src="img/astronaut.svg" alt="Astronaut Static" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Desired on scroll</p>
  
  <pre><code>&lt;div id="astronaut"&gt;
                  &lt;img src="img/astronaut-travel.svg" alt="Astronaut Travelling" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Current CSS (centering image)</p>
  
  <pre><code>#astronaut {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
  }
  </code></pre>
  
  <p>Current JavaScript (changing the position of image to fixed on desired height)</p>
  
  <pre><code>window.onscroll = function(){
  
     if(window.scrollY &gt;= 1000) { 
        document.getElementById('astronaut').setAttribute(
        "style", "position:fixed;");
     }else {
        document.getElementById('astronaut').setAttribute(
        "style", "");
      }
  
  };
  </code></pre>