Javascript 向下滚动网页时如何更改图片？

我在一个网站上工作，在这个网站上，图片处于固定位置。 滚动时图片应发生变化。 我的img文件夹中有6张图片，第一张图片在我的索引文件中实现。 现在我想把照片改5次 例如：我向下滚动，在20%时，PIC1变为PIC2。 然后在40%时，将PIC2更改为PIC3，依此类推

我尝试了javascript，但失败了

var onScrollHandler = function() {
  var newImageUrl = Pic1.svg;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
     newImageUrl = "pic2.svg"
  }
  if (scrollTop > 200) {
     newImageUrl = "pic3.svg"
  }
  if (scrollTop > 300) {
     newImageUrl = "pic4.svg"
  }
  if (scrollTop > 400) {
     newImageUrl = "pic5.svg"
  }
  if (scrollTop > 500) {
     newImageUrl = "pic6.svg"
  }
  Pic1.svg = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);

我希望这是可以理解的，有人可以帮助我，直到明天。

---

祝你今天愉快，无论如何谢谢你

以下是一些与您的需求近似的代码。在任何生产代码中使用它之前，您可能需要对它进行适当的测试，但希望它能为您指明正确的方向

所有的魔力都在javascript代码中

//对浏览器窗口中的可用滚动空间进行评估并
//在这里分配给h
var h=Math.max（document.body.scrollHeight，document.body.offsetHeight，document.documentElement.clientHeight，document.documentElement.scrollHeight，document.documentElement.offsetHeight）-window.innerHeight；
//h被分成5等分
var-diff=h/5；
var处理=假；
//变量来跟踪用户滚动的距离，以便更改图像
var diff_tracker=0；
//变量以跟踪当前显示的图像
var current_image_index=1；
var last_known_scroll_position=0；
//此功能根据滚动位置更改显示的图像
功能更改图像（滚动位置）{
如果（滚动位置===1）{
document.getElementById（“image”）.src=”https://www.w3schools.com/html/pic_trulli.jpg";
}否则如果（滚动位置===2）{
document.getElementById（“image”）.src=”https://www.w3schools.com/Html/img_girl.jpg";
}否则如果（滚动位置===3）{
document.getElementById（“image”）.src=”https://www.w3schools.com/css/img_5terre_wide.jpg";
}否则如果（滚动位置===4）{
document.getElementById（“image”）.src=”https://www.w3schools.com/w3css/img_snowtops.jpg";
}否则如果（滚动位置===5）{
document.getElementById（“image”）.src=”https://www.w3schools.com/w3css/img_nature.jpg";
}
}
//在滚动时，此侦听器根据需要触发并更新正在显示的图像
window.addEventListener（'scroll'，函数（e）{
var scroll\u position=window.scrollY；
如果（！处理）{
window.requestAnimationFrame（函数（）{
如果（上次已知的滚动位置===0）{
上次已知的滚动位置=滚动位置；
}否则{
diff_tracker+=滚动位置-上次已知滚动位置；
如果（差异跟踪>=0）{
while（diff_tracker>=diff）{
diff_跟踪器-=diff；
当前_图像_索引++；
更改图像（当前图像索引）；
}
}否则{
while（差分跟踪器<-diff）{
差分跟踪器+=差分；
当前图像索引--；
更改图像（当前图像索引）；
}
}
}
上次已知的滚动位置=滚动位置；
处理=假；
});
处理=真；
}
});
函数重新计算（）{
h=Math.max（document.body.scrollHeight，document.body.offsetHeight，document.documentElement.clientHeight，document.documentElement.scrollHeight，document.documentElement.offsetHeight）-window.innerHeight；
差=h/5；
}
//如果调整了窗口的大小，将重新计算滚动高度和差异变量
window.onresize=重新计算

粘滞的{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
填充：70px；
字体大小：20px；
}
向下滚动以查看效果
一些随机文本以启用滚动。。
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。乌贼
奥古斯特·阿利奎特前庭。Mauris ante Legula，facilisis sed ornare eu，lobortis in odio。这是一个巨大的挑战。圣矢状体、康格·埃吉特、马萨生命拍卖师。前庭前庭
阿利奎特。Mauris ante Legula，facilisis sed ornare eu，lobortis in odio。这是一个巨大的挑战。在自由女神维尼那提斯大教堂，圣母圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚圣母玛利亚教堂
塞德·奥纳雷·图皮斯。不要因为怀孕而失去生命。整型弗林利亚玉米粥厄洛斯非fst亨德雷特玉米粥。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。
不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门。克拉斯·ac·利奥·普卢斯。毛里斯·奎斯·迪亚姆·维利特。Lorem ipsum dolor sit amet，是一位杰出的献身者。Phasellus的饮食，
不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实，不可否认的事实。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Mauris ante ligula，facilisis sed ornare eu，
奥迪奥的洛博蒂斯。这是一个巨大的挑战。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命

当滚动一定数量的屏幕时，可以在javascript中更改图像标记的
src
。
尝试通过全屏展开代码段来运行此示例


函数更改（）{
变量百分比=（document.documentElement.scrollTop | | document.body.scrollTop）/
（（document.documentElement.scrollHeight | | document.body.scrollHeight）-
document.documentElement.clientHeight）*100；
var image=document.getElement