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

Question

这个想法是在滚动时使元素的级联效果粘在窗口顶部。所以问题是如何使每个下一个元素更大＆＃34;更大＆＃34;在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，而不是一个像素。