Question

我正在努力达到与下面视频类似的效果，但经过多次搜索后我没有找到任何内容：

我有一个像这样简单的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>

我之前所做的一切都是使用下面的代码使淡入效果工作，但这不是我需要的：

var divs = $('.item');
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/350) });
});

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

Answer 1

你不需要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);

如何在窗口滚动

1 个答案: