页面滚动时绿色球体透明度降低jQuery脚本失效问题求助

云上老周

2026-8-30

问题背景

故障表现：用于实现「页面向下滚动时降低绿色球体透明度」的前端脚本此前运行正常，近期突然失效，无法定位具体故障原因。
测试站点：测试页面地址
原有实现逻辑：监听窗口滚动事件，根据页面滚动高度计算透明度值，动态赋值给绿色球体（对应选择器.bg-bubble），透明度最低保留0.2。

现有故障代码

$(document).ready(function() {
    $(window).scroll(function(event) {
        let scroll = $(this).scrollTop();
        let opacity = 1 - (scroll / 1300);
        if (opacity > 0.2) {
            $('.bg-bubble').css('opacity', opacity);
        }
    });
});

故障排查结论与修复方案

故障根因

页面近期新增了平滑滚动相关的实现，将原生window滚动替换为了内部容器滚动，实际产生滚动行为的容器不再是window对象，导致绑定在window上的scroll事件完全不会触发，逻辑自然失效。

修复方法

定位实际滚动容器：通过控制台事件监听可以确认，当前页面触发滚动的是类名为smooth-scroll-wrapper的内部div，而非window对象。
修改事件绑定目标与取值逻辑，同时补全原代码的边界判断漏洞（原代码滚动超过阈值后不会更新透明度，会导致透明度停在临界值之上），修复后代码如下：

$(document).ready(function() {
    // 替换滚动事件绑定对象为实际滚动容器
    $('.smooth-scroll-wrapper').on('scroll', function() {
        // 从当前滚动容器获取滚动高度
        const scrollTop = $(this).scrollTop();
        const opacity = 1 - (scrollTop / 1300);
        // 统一设置透明度，低于0.2时固定为0.2
        $('.bg-bubble').css('opacity', Math.max(opacity, 0.2));
    });
});