Javascript 如何在窗口滚动时将背景颜色从透明逐渐更改为黑色

我正在尝试实现与下面视频中类似的效果，但在多次搜索后，我没有找到任何内容：

我有一个简单的html，如下所示：

<div class="item">
<a class="my-img-url-class" href="some-url"><img src="my-url/my-img.jpg" class="img-class"></a>
</div>

---

我需要div/图像上的背景色在窗口滚动时从透明逐渐变为黑色。

您不需要jquery来实现这一点。以下是你应该写的：

function myScroll() {
  var scrolled = document.documentElement.scrollTop; // Firefox & IE
  var SCROLLED = document.body.scrollTop // Chrome, Safari & Opera
  var divs = document.querySelectorAll('.item')
  var opac = 1 - 360 / scrolled;
  var OPAC = 1 - 360 / SCROLLED;
  var i;
  for (i = 0; i < divs.length; i++) {
    divs[i].style.opacity = opac;
    divs[i].style.opacity = OPAC;
  }
}
document.addEventListener("scroll", myScroll);

函数myScroll（）{
var scrolled=document.documentElement.scrollTop；//Firefox&IE
var SCROLLED=document.body.scrollTop//Chrome、Safari和Opera
var divs=document.querySelectorAll（“.item”）
var opac=1-360/滚动；
var OPAC=1-360/滚动；
var i；
对于（i=0；i

谢谢@Wais，但我猜您的代码有问题，因为检查元素item div opacity保持不变为1，即使我滚动或不滚动：

我在chrome上试用过。它工作得很好。如果遇到任何问题，只需检查脚本是否作为

标记中的最后一个元素，而不是

标记中的最后一个元素。对不起，我需要一个黑色覆盖，而不是0到1之间的不透明性。

function myScroll() {
  var scrolled = document.documentElement.scrollTop; // Firefox & IE
  var SCROLLED = document.body.scrollTop // Chrome, Safari & Opera
  var divs = document.querySelectorAll('.item')
  var opac = 1 - 360 / scrolled;
  var OPAC = 1 - 360 / SCROLLED;
  var i;
  for (i = 0; i < divs.length; i++) {
    divs[i].style.opacity = opac;
    divs[i].style.opacity = OPAC;
  }
}
document.addEventListener("scroll", myScroll);