如何实现文本块进入视口时随滚动调整opacity，超出后透明度归零

想要实现的效果为：每个文本块仅在处于窗口视口范围内时，随滚动操作将其opacity从0调整为1。当第一个文本块进入视口后随滚动调整透明度，滚动到下一个文本块位置时，第一个文本块的opacity降至0，同时下一个文本块随滚动逐渐显示。
参考效果截图：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>向下滚动</h1>
<div class="text-block">
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus.
Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
</div>
<div class="text-block">
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus.
Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
</div>
<div class="text-block">
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus.
Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
</div>
<div class="text-block">
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus.
Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
</div>

CSS代码 #

h1 {
  height: 100vh;
  background: red;
  text-align: center;
}
.text-block {
  width: 50%;
  margin-bottom: 150px;
}

JS代码 #

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
        $('.text-block').each(function () {
          $(this).css({
              opacity: function() {
                  var elementHeight = $(this).height(),
                  opacity = ((elementHeight - scrollTop) / elementHeight);
                  return opacity;
            }
      });
    });
});

原有代码的核心问题是透明度计算逻辑未关联元素在页面中的实际位置，只参考了全局滚动高度和元素自身高度，无法匹配视口判断需求。
先给.text-block补充默认透明度和过渡样式，让渐变效果更顺滑：

.text-block {
  width: 50%;
  margin-bottom: 150px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

修改后的JS逻辑：先获取视口高度、元素距离页面顶部的偏移量，再计算元素在视口中的位置占比，最终得到透明度值，同时做边界限制保证透明度在0~1区间内。

修复后完整JS代码 #

$(window).on('scroll', function() {
  const viewportHeight = $(window).height();
  const scrollTop = $(window).scrollTop();
  
  $('.text-block').each(function() {
    const $el = $(this);
    const elTop = $el.offset().top;
    const elHeight = $el.outerHeight();
    // 定义元素进入视口、离开视口的触发边界
    const startShow = elTop - viewportHeight;
    const endHide = elTop + elHeight;
    
    let opacity = 0;
    if (scrollTop > startShow && scrollTop < endHide) {
      // 元素进入视口阶段，透明度从0升到1
      opacity = (scrollTop - startShow) / (viewportHeight * 0.5);
      // 元素接近视口顶部阶段，透明度从1降到0
      if (scrollTop > elTop - viewportHeight * 0.3) {
        opacity = 1 - (scrollTop - (elTop - viewportHeight * 0.3)) / (viewportHeight * 0.5);
      }
      // 限制透明度范围在0-1之间
      opacity = Math.max(0, Math.min(1, opacity));
    }
    $el.css('opacity', opacity);
  });
}).trigger('scroll'); // 页面加载时触发一次计算，初始化初始状态

可根据需要调整代码中0.5、0.3的比例参数，自定义渐变的速度和触发时机。

内容的提问来源于stack exchange，提问作者monsaic123