Javascript 根据图像在屏幕上的位置更改图像

我一直在试图找到一种方法，当图像容器在屏幕上可见并向上滚动一定量时，图像会褪色并切换到不同的图像，当您向下滚动元素时，图像会发生变化

我在这一页上找到了确切的功能：（视频下面的第四部分）。我知道在某些情况下可以使用jQuery scrollTop方法，我在stackoverflow上找到的所有示例都提到了这一点，但它在我的响应页面上不起作用，因为元素在页面上移动，所以我不想切换的图像与页面顶部的高度并不总是相同

.top{高度：100vh；宽度：100%；背景：红色}
.scrollImageSwap{宽度：100%；}
.scrollImageSwap img{宽度：100%；}
.scrollImageSwap.image1{display:block；}
.scrollImageSwap.image2{显示：无；}
.底部{高度：100vh；宽度：100%；背景：红色}

---

OP注意到该解决方案有效，但没有使用褪色。我已经更新了答案

您可以使用jQuery的

fadeIn（）和<代码>淡出（）要实现此目的：

$(document).scroll(function(){
        if($(this).scrollTop() >= $('.scrollImageSwap').offset().top - 5) {

          $(".image1").stop().fadeOut(1000, function(){
            $(".image2").stop().fadeIn(1000);
          }); 
        } 

        else {
            $(".image2").stop().fadeOut(1000, function(){
            $(".image1").stop().fadeIn(1000);
          });
        }
    });

这应该可以正常工作，如图所示。
谢谢，效果很好：D最后一个添加项您可以在属性更改之间添加淡入淡出吗？我试过了，每次我用鼠标滚动时，不管是否碰到偏移量，它都会逐渐消失。干杯