本文介绍使用 jquery 实现滚动过程中多个同名类文本元素（如 `.text`）按顺序、独立淡出的完整方案，解决所有元素同步消失的问题，并提供可调参数的响应式实现。
在网页滚动动画中，若对所有 .text 元素统一应用基于 scrollTop() 的全局透明度计算（如 1 – scrollTop / 250），会导致它们完全同步淡出——只要滚动距离超过阈值，所有文本瞬间变透明，失去层次感和视觉节奏。根本原因在于未区分每个元素在页面中的垂直位置关系。
正确的做法是为每个 .text 元素建立独立的淡出触发点与衰减曲线。以下代码通过 $(‘.text’).each() 遍历每个元素，并结合其 dom 索引（index）动态生成差异化逻辑：
$(document).ready(function() { $(window).scroll(function() { $('.text').each(function(index) { const $this = $(this); const scrollTop = $(window).scrollTop(); // 每个元素延迟开始淡出：第0个从0px起，第1个从5px起，依此类推 if (scrollTop > index * 5) { // 分母随索引增大而增大 → 后续元素淡出更“慢”，形成错落感 const fadeFactor = (index + 1) * 100; const opacity = math.max(0, 1 - scrollTop / fadeFactor); $this.css('opacity', opacity); } }); }); });✅ 关键设计说明：
- index * 5 控制淡出起始偏移量：越靠后的元素越晚开始淡出，避免“一刀切”；
- (index + 1) * 100 控制淡出速度梯度：索引越大，分母越大，相同滚动距离下透明度下降越平缓，实现自然的层叠消隐；
- Math.max(0, …) 确保透明度不小于 0，防止负值异常；
- 使用 const $this = $(this) 缓存 jquery 对象，提升性能。
? 注意事项：
- 若需更精确控制（如按元素实际 offset().top 而非索引），应替换 index * 5 为 $this.offset().top – 100（-100 表示提前100px开始淡出）；
- 建议搭配 CSS transition: opacity 0.3s ease 实现平滑过渡（在 .text 类中添加）；
- 在真实项目中，建议用 requestAnimationFrame 替代直接绑定 scroll 事件，或使用节流（throttle）优化性能；
- 现代替代方案：可使用 Intersection Observer API 实现更高效、无依赖的原生淡入/淡出，但 jQuery 方案仍适用于快速原型或遗留系统。
该方法让每一行文本拥有专属的“消失节奏”，既解决了同步消失问题，又赋予页面优雅的视差式阅读体验。