本文介绍如何通过 jquery 实现页面滚动时，多个具有相同类名的文本元素按顺序、独立地渐隐消失，避免所有文本同步消失的问题。核心在于为每个元素设置基于其索引的差异化透明度计算逻辑。
在实现滚动淡出效果时，常见误区是直接对所有 .text 元素统一应用相同的 scrollTop() 计算公式（如 1 - $(window).scrollTop() / 250），这会导致所有文本在同一滚动位置瞬间归零透明度，失去层次感与视觉节奏。
正确做法是为每个元素引入唯一性偏移量——利用 .each() 遍历配合 index 参数，使每个文本的淡出起始位置和衰减速率与其 DOM 顺序相关联。以下是优化后的核心代码：
$(document).ready(function() {
$(window).scroll(function() {
$('.text').each(function(index) {
const scrollTop = $(window).scrollTop();
// 每个元素延迟开始淡出（index * 5px 偏移）
// 且衰减分母随索引增大而增大，确保下方文本淡出更缓慢
if (scrollTop > index * 5) {
const opacity = 1 - scrollTop / ((index + 1) * 100);
$(this).css('opacity', Math.max(0, opacity)); // 防止负值
}
});
});
});? 关键设计说明：
触发式加载精美特效企业网站源码1.0.0
下载
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
- index * 5：让第 0 个元素在滚动 0px 后即开始淡出，第 1 个延迟至 5px，第 2 个延迟至 10px……形成错峰消失效果；
- ((index + 1) * 100)：分母随索引递增，使靠后的文本透明度下降更平缓（例如第 1 个文本在 scrollTop=100 时完全透明，而第 3 个需到 300px 才完全透明）；
- Math.max(0, opacity)：强制透明度不低于 0，避免 CSS 渲染异常。
✅ 补充建议：
- 若需更高性能，可结合 requestAnimationFrame 节流滚动事件；
- 现代项目推荐使用 CSS @scroll-timeline + animation 实现原生滚动驱动动画（兼容性需查 caniuse）；
- 对于无 jQuery 依赖场景，可用 document.querySelectorAll('.text') 替代并用 forEach 遍历。
该方案兼顾可读性与实用性，适用于多段标题、引文或卡片式文案的渐进式退出动效。
