使用Jquery在向下滚动时逐渐增加CSS不透明度

<script src="https://cdn.jsdelivr.net/jquery/3.5.1/jquery.min.js"></script>

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

$(document).ready(function() {
  $("#myElement").addClass("fade-in");
});

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop(); // 获取滚动距离
  var windowHeight = $(window).height(); // 获取窗口高度
  var elementOffset = $("#myElement").offset().top; // 获取元素的位置

  if (elementOffset < (scrollTop + windowHeight)) {
    // 元素进入可视区域
    var opacity = (scrollTop + windowHeight - elementOffset) / windowHeight;
    if (opacity > 1) {
      opacity = 1;
    }
    $("#myElement").css("opacity", opacity);
  }
});