Question

我一直试图找到一种方法，当图像容器可见时，图像会淡入并切换到不同的图像，并在屏幕上向上滚动一定量，然后在向下滚动元素时返回。

我在此页面上找到了确切的功能：http://www.asicstiger.com/gb/en-gb/knit（视频下方的第4部分）。我知道你可以在某些情况下使用jQuery scrollTop方法，到目前为止我在stackoverflow上找到的所有示例都提到了这一点，但它在我的响应页面上不起作用，因为元素在页面上移动所以我不想要的图像切换并不总是与页面顶部相同。

.top {height:100vh;width:100%; background:red}
.scrollImageSwap {width:100%;}
.scrollImageSwap img {width:100%;}
.scrollImageSwap .image1 {display:block;}
.scrollImageSwap .image2 {display:none;}
.bottom {height:100vh;width:100%; background:red}

<div class="top"></div>
<div class="scrollImageSwap">
  <img class="image1" src="https://openclipart.org/image/800px/svg_to_png/19972/ivak-TV-Test-Screen.png" alt="image 1" />

  <img class="image2" src="http://www.hertenkamp-enkhuizen.nl/test/wp-content/uploads/sites/7/2015/06/testbeeld.jpg" alt="image 2" />
</div>
<div class="bottom"></div>

有人可以帮忙吗？

Answer 1

OP注意到解决方案有效，但没有使用淡入淡出。我已经更新了答案。

您可以使用jQuery的fadeIn();和fadeOut();来实现此目的：

$(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);
          });
        }
    });

这应该可以正常运行，如fiddle所示。

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

1 个答案: