Javascript 每个元素上的淡入淡出-滚动

如何在每个元素而不是整个元素上应用淡入度（与高度相比）

HTML:

JS:

我建议使用来计算元素相对于视口的位置

通过其相对于视口的位置，可以计算其在视口外的百分比，并在转换为0-1值后将其用作不透明度：

var $elem = $('.test.fade');
for (var i = 0; i <= 5; i++) {
    $elem.clone().appendTo('body');
}
$(window).scroll(function() {
  $('.fade').each(function() {
    var bounds = this.getBoundingClientRect();
    var op = Math.max((bounds.height + Math.min(bounds.top, 0)) / bounds.height, 0);
    $(this).css('opacity', op);
  });
});

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font: 1em 'Open Sans', sans-serif;
}

.test {
    height: 70vh;
    width: 30%;
    background-color: rgba(0, 0, 0, 0.6);
    margin: 1em auto;
}

var $elem = $('.test.fade');
for (var i = 0; i <= 5; i++) {
    $elem.clone().appendTo('body');
}
$(window).scroll(function() {
    var percent = $(this).scrollTop() / ($(document).height() - $(this).height());
    $('.fade').each(function() {
        $(this).css('opacity', 1 - percent);
    });
});

var $elem = $('.test.fade');
for (var i = 0; i <= 5; i++) {
    $elem.clone().appendTo('body');
}
$(window).scroll(function() {
  $('.fade').each(function() {
    var bounds = this.getBoundingClientRect();
    var op = Math.max((bounds.height + Math.min(bounds.top, 0)) / bounds.height, 0);
    $(this).css('opacity', op);
  });
});