优化固定头部变色逻辑：绑定DOMContentLoaded与Scroll事件去冗余

当前页面已实现固定头部随滚动区块背景明暗切换文字颜色的功能，但JS代码存在大量冗余逻辑。以下是优化后的解决方案：

优化后的JavaScript代码 #

const container = document.querySelector('.js-snap')
if (container) {
    const header = document.querySelector(".js-header");
    const sections = document.querySelectorAll('.js-scroll-post[data-theme="is-dark"]');
    const isWhite = 'is-white';
    const scrollContainer = document.querySelector(".js-snap-container");

    // 提取核心逻辑为独立复用函数
    const updateHeaderColor = (scrollPosition) => {
        let headerIsWhite = false;
        const fixedHeight = header.offsetHeight;

        sections.forEach((section) => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            
            // 判断头部是否处于深色区块范围内
            if (scrollPosition < sectionTop + sectionHeight && scrollPosition + fixedHeight > sectionTop) { 
                headerIsWhite = true;
            }
        });

        // 简化类名切换逻辑
        header.classList.toggle(isWhite, headerIsWhite);
    };

    // 页面加载时初始化头部颜色
    window.addEventListener("DOMContentLoaded", () => {
        updateHeaderColor(window.scrollY);
    });

    // 滚动时实时更新头部颜色
    scrollContainer.addEventListener("scroll", (e) => {
        updateHeaderColor(e.target.scrollTop);
    });
}

优化说明 #

• 提取复用逻辑：将重复的颜色判断、类名切换代码封装成updateHeaderColor函数，仅需传入当前滚动位置即可完成头部状态更新，彻底消除冗余
• 减少DOM查询：提前获取滚动容器元素，避免在事件回调中重复执行DOM查询操作
• 简化类名操作：使用classList.toggle()替代条件判断式的类名添加/移除，代码更简洁高效
• 优化变量命名：将语义模糊的变量（如fixed_position、toCross_position）改为scrollPosition、sectionTop，提升代码可读性

原页面代码 #

HTML代码 #

<header class="site-header js-header"></header>

<div class="scroll js-snap">
    <div class="scroll-container js-snap-container">
        <div class="section is-dark"></div>
        <div class="section"></div>
        <div class="section is-dark"></div>
        <div class="section is-dark"></div>
        <div class="section"></div>
        <div class="section"></div>
    </div>
</div>

CSS代码 #

.site-header {
    position: fixed;
    width: 100%;
    height: 3em;
    top: 0;
    left: 0;
    color: black;
}
    
.site-header.is-white {
    color: white;
}

.scroll-container{
    width: 100%;
    max-height: 100vh;
    max-height: 100svh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    scroll-snap-points-y: repeat(100vh);
}
    
.section {
    width: 100%;
    height: 100vh;
    background-color: white;
    scroll-snap-align: start;
}
    
.section.is-dark {
    background-color: black;
}

内容的提问来源于stack exchange，提问作者Mathieu Préaud