本文介绍如何通过 javascript 在页面加载和滚动时自动为元素添加或移除 css 类，确保用户刷新页面后（即使位于非顶部位置）也能立即应用正确的样式状态。
本文介绍如何通过 javascript 在页面加载和滚动时自动为元素添加或移除 css 类，确保用户刷新页面后（即使位于非顶部位置）也能立即应用正确的样式状态。
在实现“滚动时固定头部”或“滚动后改变导航栏样式”等交互效果时，仅监听 scroll 事件是不够的——因为用户可能通过浏览器前进/后退、刷新或直接跳转到页面中部，此时 scrollY 已大于 0，但 scroll 事件并未触发，导致样式类（如 "scrolled"）未能及时添加。
正确的做法是将滚动状态检测逻辑封装为独立函数，并在两个关键时机调用：
- 页面首次加载完成时（
DOMContentLoaded或直接执行）； - 每次滚动发生时（
scroll事件监听器）。
以下是优化后的完整实现：
const header = document.getElementById("header");
function checkScroll() {
// 使用 toggle(class, condition) 简洁控制类的有无
header.classList.toggle("scrolled", window.scrollY >= 1);
}
// 立即执行：处理页面加载时的初始滚动位置
checkScroll();
// 监听滚动，持续响应位置变化
window.addEventListener("scroll", checkScroll);
✅ 优势说明：
-
classList.toggle(className, boolean)比add()/remove()更简洁安全，避免重复添加或误删； -
checkScroll()在脚本加载后立即执行，确保初始状态准确（如用户从锚点链接进入或刷新停留在中部）； - 无需维护额外变量（如
SCROLL_DISTANCE），直接读取window.scrollY，语义清晰、无状态冗余。
⚠️ 注意事项：
- 确保
<header id="header"></header>在脚本执行前已存在于 DOM 中；若脚本置于，建议包裹在DOMContentLoaded事件中，或使用defer属性； - 对于性能敏感场景（如高频滚动），可添加
requestAnimationFrame节流（本例中因逻辑极轻量，通常无需）； - 判断阈值
>= 1可根据设计需求调整（例如>= 10避免误触发）。
该方案兼顾健壮性与可维护性，是现代前端中处理滚动状态类的标准实践。
