滚动时实现div元素透明度变化的问题求助

我想通过修改opacity属性，实现滚动到div元素时的淡入淡出效果，但代码无法正常运行。这些div位于页面中间而非顶部，我怀疑是scrollTop的计算逻辑出了问题。

原代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="content"></div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>

CSS #

.content {
  height: 100px;
}

.b_wrapper {
  background: lightgreen;
  margin-top: 40px;
  padding: 20px;
}

JavaScript #

var fade = $('.b_wrapper');
var range = 400;

$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  fade.each(function() {
    var offset = $(this).offset().top;
    var height = $(this).outerHeight();
    offset = offset + height / 1;
    
    $(this).css({
      'opacity': 1 - (st + offset - range) / range
    });
  });
});

问题分析与修正 #

原代码的核心问题在于透明度计算逻辑错误：错误地将元素的offset值加上自身高度，且公式未正确反映元素进入/离开视口的过程，导致opacity值出现负数或大于1的异常情况，无法正常触发淡入淡出。

修正后的JavaScript代码如下：

var fade = $('.b_wrapper');
var range = 400;
var windowHeight = $(window).height();

$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  fade.each(function() {
    var elementTop = $(this).offset().top;
    var elementHeight = $(this).outerHeight();
    // 元素底部距离视口顶部还有range距离时，开始淡入
    var fadeStart = elementTop + elementHeight - range;
    // 元素顶部超出视口顶部range距离时，完全淡出
    var fadeEnd = elementTop + windowHeight;
    
    let opacity;
    if (st < fadeStart) {
      opacity = 0;
    } else if (st > fadeEnd) {
      opacity = 0;
    } else {
      // 在淡入淡出区间内计算渐变透明度
      opacity = 1 - Math.abs(st - (fadeStart + range/2)) / (range/2);
    }
    // 确保透明度始终在0-1范围内
    opacity = Math.max(0, Math.min(1, opacity));
    $(this).css('opacity', opacity);
  });
});

修正逻辑说明 #

1. 新增windowHeight变量，用于判断元素与视口的相对位置
2. fadeStart：定义元素开始淡入的滚动位置——当滚动到元素底部距离视口顶部还有range距离时，逐步显示
3. fadeEnd：定义元素完全淡出的滚动位置——当元素顶部超出视口顶部range距离时，完全隐藏
4. 通过判断滚动位置st与fadeStart、fadeEnd的关系，计算对应透明度，同时限制值在0-1之间，避免异常显示

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