Javascript 根据卷轴或文本id的数量更改图片

（请不要使用jQuery，只使用Javascript）

您好，我是Javascript新手，我想知道是否有可能在滚动过程中生成一个固定的图像，该图像被位于相同位置的另一个图像替换。这样，当您滚动时，图片看起来会发生变化

我找到了一个使用jQuery的答案，我不知道它是什么意思，因为我们不应该在课堂上使用这种语言

---

我可以理解链接中的教程，但这部分我一点也不懂。请理解jQuery的人将其翻译成Javascript好吗？这将是对我最大的帮助。

相同的纯JS脚本

//控制滚动行为的全局变量
常数步长=30；//对于每30像素，更改一个图像
函数trackScrollPosition（）{
const y=window.scrollY；
常数标签=数学最小值（数学楼层（y/30）+1,20）；
常量imageToUse=水果图像[标签]；
//更改背景图像
document.querySelector（'.image container'）.style.backgroundImage=`url（${imageToUse}）`；
}
addEventListener（“加载”，函数（）{
window.addEventListener（'scroll'，trackScrollPosition）；
})

$（'.image container'）.css（'background-image'，'url（'${imageToUse}'））

-这部分意味着我们正在寻找一个带有image container类的元素，并且我们正在将它的css background image属性更改为imageToUse（以前设置为furtimages[label]）

---

一旦文档对象模型（DOM）变得可以安全操作，上面的函数就会运行，并负责在滚动时调用trackScrollPosition函数。

OP并不是这样要求的。

// Global variable to control the scrolling behavior
const step = 30; // For each 30px, change an image
function trackScrollPosition() {
  const y = window.scrollY;
  const label = Math.min(Math.floor(y/30) + 1, 20);
  const imageToUse = fruitImages[label];
  // Change the background image
  $('.image-container').css('background-image', `url('${imageToUse}')`);
}
$(document).ready(()=>{
  $(window).scroll(()=>{
    trackScrollPosition();
  })
})

$(document).ready(()=>{
  $(window).scroll(()=>{
    trackScrollPosition();
  })
})