如何调整代码实现页面非顶部时自动添加指定类（解决刷新失效问题）

原代码的问题在于仅当scroll事件触发时才会检查滚动位置并更新类名，但页面刷新后浏览器会自动恢复之前的滚动位置，这个过程不会触发scroll事件，导致scrolled类无法自动添加。

解决思路很直接：把判断滚动位置、更新类名的逻辑抽成独立函数，在页面加载完成后立即执行一次这个函数，同时保留滚动事件的调用。这样不管是刷新页面还是用户手动滚动，都能正确为Header处理类的添加或移除。

修改后的代码：

const SELECTOR_HEADER = document.getElementById("header");
const CLASS_NAME_SCROLL = "scrolled";

// 封装滚动位置判断与类名更新逻辑
function updateHeaderScrollClass() {
    const scrollDistance = window.scrollY;
    if (scrollDistance >= 1) {
        SELECTOR_HEADER.classList.add(CLASS_NAME_SCROLL);
    } else {
        SELECTOR_HEADER.classList.remove(CLASS_NAME_SCROLL);
    }
}

// 页面加载时立即执行，处理刷新后的初始滚动位置
updateHeaderScrollClass();

// 滚动事件触发时再次执行
window.addEventListener('scroll', updateHeaderScrollClass);

额外优化说明：

• 将原全局变量SCROLL_DISTANCE改为函数内的局部变量，避免不必要的全局状态维护
• 直接传递函数引用给scroll事件监听，减少匿名函数的创建，代码更简洁

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