本文介绍如何在页面加载完成及滚动时，自动为页眉元素添加或移除 scrolled 类，确保刷新后仍能准确反映当前滚动状态，避免因用户停留在页面中部而遗漏样式更新。
本文介绍如何在页面加载完成及滚动时，自动为页眉元素添加或移除 `scrolled` 类，确保刷新后仍能准确反映当前滚动状态，避免因用户停留在页面中部而遗漏样式更新。
在实现“滚动时固定页眉”或“滚动后改变样式”等交互效果时，一个常见问题是：用户刷新页面时若位于非顶部位置（如已向下滚动 300px），仅监听 scroll 事件无法触发初始样式更新——因为此时并未发生滚动行为。原代码将判断逻辑绑定在 scroll 事件内，导致页面加载后 scrolled 类缺失，视觉状态与实际滚动位置不一致。
解决方法是将滚动状态检测逻辑封装为独立函数，并在页面加载完成时立即执行一次，同时复用该函数响应滚动事件。以下是优化后的完整实现：
const header = document.getElementById("header");
function checkScroll() {
// 使用 toggle(className, condition) 简洁控制类的增删
header.classList.toggle("scrolled", window.scrollY >= 1);
}
// 页面加载完成后立即检查一次（覆盖刷新场景）
window.addEventListener("DOMContentLoaded", checkScroll);
// 同时监听滚动，保持实时同步
window.addEventListener("scroll", checkScroll);
✅ 优势说明：
-
classList.toggle(className, boolean)比add()/remove()更简洁安全，避免重复添加或误删； -
DOMContentLoaded保证 DOM 就绪后即刻校验，无需等待全部资源（如图片）加载完成； - 单一函数复用，逻辑集中、易于维护和测试；
- 判断阈值
>= 1可根据需求调整（如>= 10实现延迟触发）。
⚠️ 注意事项：
- 若页面存在 SSR（服务端渲染）或 hydration 延迟（如 React/Vue 应用），请确保在客户端 DOM 挂载完成后调用
checkScroll()； - 在支持
IntersectionObserver的复杂场景中，可结合其进行性能优化，但本例中scroll+DOMContentLoaded组合已足够轻量高效； - 避免在
load事件中调用（可能延迟于DOMContentLoaded），除非需等待所有资源加载完毕。
通过这一改进，无论用户是首次访问、刷新页面，还是滚动操作，页眉的 scrolled 类都能始终与 window.scrollY 状态严格同步，保障 UI 行为的一致性与可靠性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
