本文介绍使用 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);
}
});
});
});✅ 关键设计说明：
触发式加载精美特效企业网站源码1.0.0
下载
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
- 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 方案仍适用于快速原型或遗留系统。
该方法让每一行文本拥有专属的“消失节奏”，既解决了同步消失问题，又赋予页面优雅的视差式阅读体验。
