Question

我有一个包含5个面板的页面。当每个面板进入视图时，我希望它的2个子元素的大小减小，具体取决于用户滚动量。

我已经编写了一个能够在某种程度上缩小DIV的函数，但它会在所有这些函数上发生，而不是在每个元素进入视图时，这是否有意义？

$(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

不确定我是否完全理解所需的效果。但是我写了一个小提琴，模仿每个面板的动画方式，但是对于单个面板，当它们“在视野中”时：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 + "%"
      });
    });
});

不要在每个元素上运行函数

1 个答案: