滚动时文本淡出异常：所有.text类元素同步消失问题求助

你当前代码的问题在于：所有.text元素的透明度都绑定到同一个全局滚动值scrollTop，不管元素在页面的哪个位置，只要滚动就会一起改变透明度，自然会出现顶部文本消失时下方文本也跟着消失的情况。

要实现每个文本元素根据自身位置单独淡出，需要遍历每个.text元素，单独计算它与视口的相对位置，再动态调整透明度，修改后的代码如下：

$(document).ready(function(){
    $(window).scroll(function(){
        const scrollTop = $(this).scrollTop();
        const windowHeight = $(window).height();
        
        // 遍历每个.text元素，单独处理透明度
        $(".text").each(function(){
            const $el = $(this);
            const elTop = $el.offset().top;
            const elHeight = $el.outerHeight();
            
            // 自定义淡出的起始和结束位置：
            // fadeStart：元素底部距离视口顶部还有100px时，开始准备淡出
            // fadeEnd：元素顶部完全滚出视口时，透明度变为0
            const fadeStart = elTop - windowHeight + 100;
            const fadeEnd = elTop + elHeight;
            
            let opacity = 1;
            // 当滚动距离超过fadeStart时，开始计算透明度
            if(scrollTop > fadeStart){
                opacity = 1 - (scrollTop - fadeStart) / (fadeEnd - fadeStart);
                // 确保透明度不会小于0
                opacity = Math.max(0, opacity);
            }
            
            $el.css("opacity", opacity);
        });
    });
    
    // 页面加载时触发一次滚动，保证初始状态正确
    $(window).trigger("scroll");
});

关键逻辑说明 #

• 使用.each()遍历每个.text元素，让每个元素的透明度计算独立
• fadeStart和fadeEnd可以根据需求调整数值：比如把100改大，会让元素更早开始淡出；改小则会延迟淡出时机
• Math.max(0, opacity)避免透明度出现负数，防止样式异常

优化建议 #

1. 给.text元素添加CSS过渡效果，让淡出更平滑：

.text {
    transition: opacity 0.3s ease;
}

2. 如果页面元素较多，可添加节流函数减少滚动事件触发频率，提升性能：

// 简单节流函数，控制事件每100ms触发一次
function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, arguments);
                timer = null;
            }, delay);
        }
    }
}

// 绑定节流后的滚动事件
$(window).scroll(throttle(function(){
    // 这里放之前的遍历处理逻辑
}, 100));

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