寻求滚动触发图片渐隐的优化公式（当前公式存在失效问题）

你的原始代码存在几个关键问题，导致渐隐效果出现异常：

• 当scrollTop为0时，会触发除以0的JS错误，直接中断代码执行
• CSS的opacity取值范围是0~1，但你的公式100 / scrollTop在scrollTop < 100时会得到大于1的值，浏览器会强制将其设为1，这部分滚动区间内视觉上完全没有变化；当scrollTop超过100后，opacity会持续趋近于0，但变化会越来越平缓，看起来像是"停止"了

下面是两种更实用的优化方案，你可以根据需求选择：

方案一：从顶部滚动开始线性渐隐到完全透明 #

适合希望元素随滚动从完全可见逐步消失，达到指定滚动距离后保持透明的场景：

$(window).scroll(function() {
  const scrollTop = $(this).scrollTop();
  const fadeThreshold = 500; // 调整为你希望完成渐隐的滚动距离（单位：px）
  // 计算opacity：从1线性降到0，超出阈值后保持0
  let opacity = 1 - (scrollTop / fadeThreshold);
  // 确保opacity始终在0~1的有效范围内
  opacity = Math.max(0, Math.min(1, opacity));
  $('.item').css({ opacity: opacity });
});

方案二：指定滚动区间内渐隐 #

适合希望元素在滚动到某个位置后才开始渐变，到另一个位置完全消失的场景：

$(window).scroll(function() {
  const scrollTop = $(this).scrollTop();
  const startFade = 200; // 开始渐隐的滚动距离
  const endFade = 700;   // 完成渐隐的滚动距离
  let opacity;

  if (scrollTop <= startFade) {
    opacity = 1; // 未达到起始位置，保持完全可见
  } else if (scrollTop >= endFade) {
    opacity = 0; // 超过结束位置，保持完全透明
  } else {
    // 在起始和结束区间内线性计算opacity
    opacity = 1 - ((scrollTop - startFade) / (endFade - startFade));
  }

  $('.item').css({ opacity: opacity });
});

注意事项 #

• 你需要根据页面布局调整fadeThreshold、startFade、endFade的数值，比如可以通过$('.item').offset().top获取元素的位置，结合页面高度来动态计算这些阈值
• 如果需要反向效果（从透明渐变为可见），只需要把公式中的1 - ...改成...即可

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