可以通过将 CSS 定位属性设置为 "fixed" 来使用 JavaScript 固定顶部导航栏。步骤包括：创建 HTML 结构，带有导航栏元素的 ID。编写 CSS 样式，设置 "position: fixed;"、"top: 0;"、"left: 0;"、"right: 0;" 和 "z-index: 999;"。添加 JavaScript 代码，监听页面滚动事件，当滚动条位置大于 0 时，将 "fixed" CSS 类添加到导航栏元素，否则将其删除。
如何使用 JavaScript 固定顶部导航栏
固定导航栏
使用 JavaScript 固定导航栏的方法是将 CSS 定位属性设置为 "fixed"。这样，当页面滚动时，导航栏将保持在屏幕顶部。
步骤：
-
创建 HTML 结构：
"top-nav" 是导航栏元素的 ID。
-
编写 CSS 样式：
#top-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }- "position: fixed;" 将导航栏固定在页面顶部。
- "top: 0;" 设置导航栏距离页面顶部的距离为 0。
- "left: 0;" 将导航栏对齐到页面左侧。
- "right: 0;" 将导航栏对齐到页面右侧。
- "z-index: 999;" 确保导航栏位于其他元素之上。
-
添加 JavaScript 代码：
const nav = document.getElementById("top-nav"); // 监听页面滚动事件 window.addEventListener("scroll", function() { // 获取滚动条位置 const scrollTop = window.pageYOffset; // 当滚动条位置大于 0 时，将导航栏固定 if (scrollTop > 0) { nav.classList.add("fixed"); } else { nav.classList.remove("fixed"); } });- "fixed" 是一个 CSS 类，包含固定导航栏的样式。
- "add" 和 "remove" 方法用于添加或删除 CSS 类。
