本文详解 offsetTop 报错“undefined”的根本原因——getElementsByClassName 返回的是 NodeList 而非单个元素，并提供使用 querySelector + classList.toggle 的健壮、简洁解决方案。
本文详解 `offsettop` 报错“undefined”的根本原因——`getelementsbyclassname` 返回的是 nodelist 而非单个元素，并提供使用 `queryselector` + `classlist.toggle` 的健壮、简洁解决方案。
在实现粘性导航栏（sticky navigation）时，一个常见错误是直接对 document.getElementsByClassName("topnav") 的返回值调用 offsetTop 或 classList 方法，结果触发 Uncaught TypeError: Cannot read properties of undefined。这是因为 getElementsByClassName() 返回的是 NodeList（类数组集合），而非单个 DOM 元素对象——它没有 offsetTop 属性，也不支持 classList.add() / remove() 等实例方法。
✅ 正确做法是：使用 document.querySelector(".topnav") 获取首个匹配的元素（返回 Element 类型），确保后续属性与方法调用有效：
const navbar = document.querySelector(".topnav");
if (!navbar) {
console.warn("未找到 .topnav 元素，请检查 HTML 结构或脚本执行时机");
return;
}
const navbarTop = navbar.offsetTop;
window.addEventListener('scroll', () => {
navbar.classList.toggle('sticky', window.pageYOffset >= navbarTop);
});? 关键说明：
- querySelector() 返回单个元素（null 表示未找到），可安全访问 offsetTop；
- classList.toggle(className, condition) 是声明式写法，比手动 add/remove 更简洁、无状态冗余；
- 建议用 addEventListener 替代 window.onscroll，避免事件被覆盖。
? 样式补充（关键！）：
.sticky 类需配合 position: sticky 及 top 值才能生效，否则无视觉效果：
.sticky {
position: sticky;
top: 0; /* 必须指定，否则 sticky 不触发 */
z-index: 1000; /* 避免被其他内容遮挡 */
}⚠️ 注意事项：
- 执行时机：确保脚本在 DOM 加载完成后运行（如放在
