javascript - 不在每个元素上运行一次函数

Question

我有一个包含 5 个面板的页面。当每个面板进入 View 时，我希望它的 2 个子元素根据用户滚动量减小大小。

我已经编写了一个函数来设法缩小 DIV，但它发生在所有 DIV 上，而不是在每个元素出现时发生，这有意义吗？

https://jsfiddle.net/n7vmaz9s/

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  if (scrollTop < 200) {
    newWidth = 15;
  } else if (scrollTop > 400) {
    newWidth = 7.5;
  } else {
    newWidth = 15 - 7.5 * ((scrollTop - 200)) / 200;
  }
  $('.before').css({
    'width': newWidth + "%"
  });
  $('.after').css({
    'width': newWidth + "%"
  });
})

当父元素出现时，如何让每个“之前”和“之后”div 工作？

---

我也试过这样使用 .each...

$(window).scroll(function () {
  $(".service-image").each(function(){
      elementOffset = $(this).offset().top
    var scrollTop = $(window).scrollTop();
    elemDist = elementOffset - scrollTop;
      console.log(elementOffset - scrollTop);
      if (elemDist < 0) {
          newWidth = 15;
      } else if (elemDist > 400) {
          newWidth = 7.5;
      } else {
          newWidth = 15 - 7.5 * ((scrollTop - 200)) / 200;
      }
      $('.before').css({
          'width': newWidth + "%"
      });
       $('.after').css({
          'width': newWidth + "%"
      });
    });
})

Answer 1

不确定我是否完全理解所需的效果。但是我写了一个模仿每个面板动画方式的 fiddle ，但是对于“可见”的各个面板:https://jsfiddle.net/zd0p8jfu/

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    $(".service-image").each(function(){
        var relativeScroll = scrollTop - $(this).offset().top;
      if (scrollTop < $(this).offset().top + 200) {
          newWidth = 15;
      } else if (scrollTop > $(this).offset().top + 400) {
          newWidth = 7.5;
      } else {
          newWidth = 15 - 7.5 * ((relativeScroll - 200)) / 200;
      }
      $(this).find('.before').css({
          'width': newWidth + "%"
      });
       $(this).find('.after').css({
          'width': newWidth + "%"
      });
    });
});

要反转方向，您只需像这样交换数学:

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    $(".service-image").each(function(){
        var relativeScroll = scrollTop - $(this).offset().top;
      if (scrollTop < $(this).offset().top + 200) {
          newWidth = 7.5;
      } else if (scrollTop > $(this).offset().top + 400) {
          newWidth = 15;
      } else {
          newWidth = 7.5 * ((relativeScroll - 200) / 200) + 7.5;
      }
      $(this).find('.before').css({
          'width': newWidth + "%"
      });
       $(this).find('.after').css({
          'width': newWidth + "%"
      });
    });
});