如何根据滚动 JS/jQuery 上的几个部分来更改粘性元素？

Question

我需要在滚动经过几个文本部分时更改置顶图像（通过更改 class 或更改 URL attr）。他们主页上的 Asana 有一个确切的例子

check the gif animation here

在文本第 1 部分 - 图片 1 前面，当我们在文本部分 2 附近滚动时 - 图像更改为第二部分，依此类推。当滚动回到顶部时，同样的逻辑，每个图像出现在它的文本部分的前面。

如果只有 1 个断点，我使用了这样的代码：

$(window).scroll(function () {
    if ($(window).scrollTop() >= offset) {
        $(".image").addClass("active");
    } else {
       $(".image").removeClass("active");
    }
});

但是由于可能有更多的部分，我需要另一个解决方案。

有什么想法吗？提前致谢。

Answer 1

我认为这就是您正在寻找的模式：

$(window).scroll(function () {
    image1();
    image2();
    image3();
});

function image1() {
    var min = 0;
    var max = 400;
    if(window.scrollY >= min && window.scrollY < max) {
    $("img").attr("src","https://cdn.picpng.com/head/head-the-dummy-avatar-man-tie-72756.png");
  }
}

function image2() {
    var min = 400;
    var max = 800;
    if(window.scrollY >= min && window.scrollY < max) {
    $("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlfO4xTPtZVZfQCZqpaoOV4_c3G-OMUJ00IU0fy8wnDOZzud3N2xYnMrzJbXLCs7vlmWM&usqp=CAU");
  }
}

function image3() {
    var min = 800;
    var max = 10000;
    if(window.scrollY >= min && window.scrollY < max) {
    $("img").attr("src","https://www.unite2canada.com/images/dummy-user.png");
  }
}

你可以看到这段代码在工作吧here

Answer 2

也许对某些人会有帮助，所以我将 post 我的解决方案。多亏了 Alex，我改变了逻辑：我只留下一张图片，在滚动时，我改变了 src 属性。

$(window).scroll(function () {
   let index, txtPosition, imgPosition;

   $('.text-item').each(function () {
      index = $(this).index();
      txtPosition = $(this).offset().top;
      imgPosition = $('.image-item').offset().top + 50;

      if (txtPosition < imgPosition) {
         $('.image-item img').attr('src', $(this).attr('data-image'));
      }

   });

});

如何根据滚动 JS/jQuery 上的几个部分来更改粘性元素？

How to change sticky element depending on scrolling through several section on JS/jQuery?

javascript

jquery

sticky