如何在滚动时增加每个下一个元素的 translateY？

Question

这个想法是让滚动时粘在 window 顶部的元素产生级联效果。所以问题是如何使每个下一个元素 "bigger" 在 20px 上然后是它的前一个相同元素？ Link on code. 我的代码本身：

$(window).scroll(function() {
  $('.text-layer').each(function(i) {
    var distance = $(this).parent().offset().top,
      $window = $(window);
    var increase = (i + 20);

    if ($window.scrollTop() >= distance) {
      $(this).addClass('sticked').css("transform", "translate(0px," + increase + "px)");
    }

    if ($window.scrollTop() <= distance) {
      $(this).removeClass('sticked').css("transform", "translate(0px, 0px)");
    }
  });
});

Answer 1

在您的代码中，尝试将第 5 行更改为：

var increase = i*20;

你希望每增加一个元素 20，而不是降低一个像素。

如何在滚动时增加每个下一个元素的 translateY？

How to increase every next element's translateY on scroll?

jquery

element

transform