本文介绍如何使用 jquery 实现页面滚动时，多个具有相同类名（如 `.text`）的文本元素按顺序、独立地渐隐，避免所有文字同步消失的问题。核心在于为每个元素计算独立的滚动阈值与透明度衰减曲线。
要实现“滚动时文本逐个淡出”的效果，关键在于打破全局统一计算逻辑。原代码中 $(".text").css("opacity", 1 - $(window).scrollTop() / 250) 对所有 .text 元素应用完全相同的透明度值，导致它们同步变透明——这显然不符合“逐个淡出”的交互预期。
正确做法是：遍历每个 .text 元素，根据其 DOM 顺序（或实际位置）引入偏移量（offset），使每个元素拥有独立的触发起点和衰减速率。以下是优化后的 jQuery 实现：
$(document).ready(function() {
$(window).scroll(function() {
$('.text').each(function(index) {
const scrollTop = $(window).scrollTop();
// 为每个元素设置渐隐起始点：第0个从0px开始，第1个从5px，依此类推
const fadeStart = index * 5;
// 只有当滚动超过该元素专属起始点时才开始渐隐
if (scrollTop > fadeStart) {
// 分母随索引增大而增大 → 后续元素衰减更平缓，避免过早消失
const fadeDuration = (index + 1) * 100; // 第1个元素在100px内完成淡出，第2个需200px...
const opacity = Math.max(0, 1 - (scrollTop - fadeStart) / fadeDuration);
$(this).css('opacity', opacity);
}
});
});
});✅ 关键改进说明：
- ✅ $('.text').each(...) 确保逐个处理，而非批量赋值；
- ✅ 引入 fadeStart = index * 5 实现“错峰触发”，避免全部同时开始淡出；
- ✅ 使用 (scrollTop - fadeStart) 计算相对滚动距离，使衰减真正基于各元素自身可见性状态；
- ✅ Math.max(0, ...) 防止透明度为负值，确保最小 opacity 为 0（完全隐藏）；
- ✅ fadeDuration 动态增长，让下方元素淡出过程更长，视觉更自然。
⚠️ 注意事项：
- 若元素垂直间距不均（如含不同 margin/padding），建议改用 $(this).offset().top 替代 index 计算更精确的视口位置关系；
- 在真实项目中，推荐结合 requestAnimationFrame 或节流（throttle）优化 scroll 事件性能，防止频繁重绘卡顿；
- 现代方案可考虑纯 CSS + Intersection Observer API 实现更高效、无依赖的渐隐动画（如配合 opacity + transform: translateY() 的 transition）。
通过上述方法，你将获得流畅、可控、符合直觉的滚动渐隐体验——每个文本按序淡出，互不干扰，真正实现“随滚动优雅退场”的设计目标。
