问更改img源，每20个像素

EN

<div class="fixedContainer">
        <div class="scrollableContainer">
            <img class="character" id="character" src="./images/falling-01.png"/>
        </div>
</div>

<div class="anotherContainer"></div>

.fixedContainer {
position: relative;
width: 100%;
height: 100%;
background-color: red;
overflow-y: scroll;
}

.scrollableContainer {
position: relative;
width: 100%;
height: 1800px;
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 
100%);
}

.anotherContainer {
position: relative;
width: 100%;
height: 800px;
background-color: white;
display: ;
}

.character {
position: fixed;
right: 140px;
top: 150px;
}

var image = document.getElementById("character");
var sources = ["falling-01.png", "falling-02.png", "falling-03.png", "falling-04.png", "falling-05.png", "falling-06.png", "falling-07.png", "falling-08.png", "falling-09.png"];

var i = 0;
var breakpoint = 20;                           // Change to whatever you like

window.addEventListener("scroll", function() {
var scrollDown = document.body.scrollTop;
if (scrollDown >= breakpoint) {
   img.setAttribute(src, sources[i]);
   breakpoint += 20;                       //Change to whatever you like
   i++;
}
}