javascript - 滚动更改HTML img src

如何使用html内的图像更改取决于滚动高度的图像？

当前

<div id="astronaut">
                <img src="img/astronaut.svg" alt="Astronaut Static" />
</div>

滚动所需

<div id="astronaut">
                <img src="img/astronaut-travel.svg" alt="Astronaut Travelling" />
</div>

当前CSS（居中图片）

#astronaut {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

当前的JavaScript（将图像的位置更改为固定在所需的高度）

window.onscroll = function(){

   if(window.scrollY >= 1000) {
      document.getElementById('astronaut').setAttribute(
      "style", "position:fixed;");
   }else {
      document.getElementById('astronaut').setAttribute(
      "style", "");
    }

};

最佳答案

window.onscroll = function(){

   if(window.scrollY >= 1000) {
      document.getElementById("astronaut").src="../img/astronaut-travel.svg";
   }else {
      document.getElementById("astronaut").src="../img/astronaut.svg";
    }

};