滚动过s1元素时为blur元素切换active类的代码失效问题

云上老周

2026-6-22

问题修复方案

原代码存在的核心问题

document.getElementsByClassName('s1')返回的是HTMLCollection集合，直接访问.scrollTop会获取不到正确值，必须取集合中的第一个元素（scrolledSection[0]）
计算目标位置时用了错误的属性：scrollTop是元素内部的滚动偏移，不是元素在页面中的位置，应该用offsetTop获取元素相对于页面顶部的距离；如果要判断“滚动过s1元素”，需要计算s1元素的底部位置（offsetTop + offsetHeight）
window.scrollTop不是标准属性，现代浏览器应使用window.pageYOffset或document.documentElement.scrollTop
使用classList.toggle()会在每次滚动满足条件时反复切换类，应该根据滚动位置判断是添加还是移除类

修复后的完整代码

HTML（无需修改）

<header>
    <div id="blur--linear-gradient"></div>
    <div id="header-container"></div>
</header>

<main>
    <div class="section-content s1"></div>
</main>

CSS（无需修改）

#blur--linear-gradient {
    display: none;
}

#blur--linear-gradient.active {
    display: block;
}

JavaScript（修复版）

var headerContainer = document.getElementById('header-container');
var blurOverlay = document.getElementById('blur--linear-gradient');
// 获取s1元素（取集合第一个，确保元素存在）
var scrolledSection = document.getElementsByClassName('s1')[0];

// 计算s1元素的底部位置（滚动过这个位置时触发）
var scrolledSectionBottomPos = scrolledSection.offsetTop + scrolledSection.offsetHeight;

window.addEventListener('scroll', () => {
    // 获取当前滚动位置（兼容所有浏览器）
    var scrollPos = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollPos >= scrolledSectionBottomPos) {
        // 滚动过s1，添加active类
        blurOverlay.classList.add('active');
    } else {
        // 未滚动过s1，移除active类
        blurOverlay.classList.remove('active');
    }
});