本教程详细介绍了如何使用纯javascript实现网页导航栏在用户滚动页面时动态改变背景色的效果。通过监听`window`的`scroll`事件，并根据滚动距离判断，动态地添加或移除css类，从而实现导航栏从透明到实色（或任意指定颜色）的平滑过渡，提升用户体验。
1. 概述与核心原理
在现代网页设计中，导航栏（Navbar）通常被设计为固定在页面顶部，并可能在用户向下滚动页面时改变其外观，例如从透明变为带有背景色。这种效果可以增强页面的视觉层次感和用户体验。实现这一功能的核心原理是利用JavaScript监听浏览器的滚动事件，并根据当前的滚动位置动态地修改导航栏元素的CSS类。
具体来说，我们将采取以下步骤：
- 为目标导航栏元素添加一个唯一的ID，以便JavaScript能够准确地选中它。
- 在JavaScript中，注册一个scroll事件监听器到window对象。
- 在滚动事件的回调函数中，获取当前页面的垂直滚动距离（window.scrollY）。
- 根据预设的滚动阈值，判断是否需要改变导航栏的样式。
- 通过修改导航栏元素的className属性，动态地添加或移除预定义的CSS类，从而实现背景色的切换。
2. HTML 结构准备
首先，确保你的导航栏HTML结构包含一个易于JavaScript访问的唯一标识符，例如一个id属性。在以下示例中，我们将为navigation-wrap这个div元素添加id="myNav"。
滚动时导航栏背景变化 向下滚动查看导航栏变化
页面内容区域...
3. CSS 样式定义
为了实现背景色的切换，我们需要定义导航栏在不同状态下的样式。初始状态下，导航栏可以是透明的。当页面滚动到一定距离后，我们将为其添加一个CSS类，该类会设置背景色。
以下是style.css文件中的关键CSS代码片段：
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
background-color: #fff;
overflow-x: hidden;
transition: all 200ms linear;
min-height: 200vh; /* 确保页面可滚动 */
}
.navigation-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
transition: all 0.3s ease-out; /* 添加过渡效果，使背景切换平滑 */
}
.start-header {
opacity: 1;
transform: translateY(0);
padding: 20px 0;
box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.2);
transition: all 0.3s ease-out;
background-color: transparent; /* 初始状态透明 */
}
/* 当页面滚动后，导航栏应用的样式 */
.navigation-wrap.scrolled-bg { /* 自定义一个类来添加背景色 */
background-color: #ffffff; /* 滚动后背景色变为白色 */
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15); /* 调整阴影 */
padding: 10px 0; /* 调整内边距 */
}
/* 如果使用Bootstrap的背景工具类，例如 bg-dark */
.navigation-wrap.bg-dark {
background-color: #343a40 !important; /* Bootstrap的深色背景 */
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
padding: 10px 0;
}
/* 其他原始样式 */
.navbar-light .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
border-bottom: 1px solid #212121; /* 初始为深色 */
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after,
.navbar-light .navbar-toggler-icon:before {
width: 24px;
position: absolute;
height: 1px;
background-color: #212121; /* 初始为深色 */
top: 0;
left: 0;
content: "";
z-index: 2;
transition: all 300ms linear;
}
.navigation-wrap.bg-dark .navbar-light .navbar-toggler-icon {
border-bottom-color: #fff; /* 滚动后图标变为白色 */
}
.navigation-wrap.bg-dark .navbar-light .navbar-toggler-icon:after,
.navigation-wrap.bg-dark .navbar-light .navbar-toggler-icon:before {
background-color: #fff; /* 滚动后图标变为白色 */
}
.nav-link {
color: #212121 !important; /* 初始链接颜色 */
font-weight: 500;
transition: all 200ms linear;
}
.navigation-wrap.bg-dark .nav-link {
color: #ffffff !important; /* 滚动后链接颜色变为白色 */
}
.nav-item:hover .nav-link {
color: #0087ff !important;
}
/* ... 其他CSS样式保持不变 ... */说明:
- navigation-wrap 元素设置了 transition: all 0.3s ease-out;，这使得所有CSS属性的变化都能平滑过渡。
- start-header 初始设置为 background-color: transparent;。
- 我们添加了一个名为 scrolled-bg 的自定义类，当这个类被添加到 navigation-wrap 时，导航栏的背景色会变为白色。你也可以使用 Bootstrap 提供的 bg-light 或 bg-dark 类，但为了样式的一致性，可能需要额外调整其颜色、内边距和阴影。示例中也包含了 bg-dark 的定义，并调整了其中的文字和图标颜色以适应深色背景。
4. JavaScript 逻辑实现
现在，我们编写JavaScript代码来监听滚动事件并动态修改导航栏的类。
在script.js文件中添加以下代码：
// 当DOM内容加载完毕后执行
document.addEventListener('DOMContentLoaded', () => {
// 获取导航栏元素
const myNav = document.getElementById("myNav");
// 定义滚动处理函数
function navScroll() {
// 检查页面垂直滚动距离是否超过50像素
if (window.scrollY > 50) {
// 如果滚动距离超过阈值，添加 bg-dark 类（或 scrolled-bg）
// 注意：这里使用 bg-dark 是为了与原始解决方案保持一致，它假定Bootstrap的bg-dark类存在。
// 如果不使用Bootstrap，或者需要自定义颜色，请使用如 'scrolled-bg' 这样的自定义类。
myNav.className = "navigation-wrap bg-dark start-header start-style";
} else {
// 如果滚动距离在阈值之内（或回到顶部），恢复默认类
myNav.className = "navigation-wrap start-header start-style";
}
}
// 添加滚动事件监听器
window.addEventListener('scroll', navScroll);
// 页面加载时也执行一次，以防页面刷新时已处于滚动状态
navScroll();
});代码解释:
- document.addEventListener('DOMContentLoaded', ...): 确保在DOM完全加载后才执行JavaScript代码，避免在元素尚未可用时尝试访问它们。
- const myNav = document.getElementById("myNav");: 通过之前设置的id获取导航栏元素。
- window.addEventListener('scroll', navScroll);: 为window对象添加一个scroll事件监听器。每当用户滚动页面时，navScroll函数就会被调用。
- if (window.scrollY > 50): window.scrollY属性返回文档从其左上角到当前视图顶部的垂直滚动距离。这里设置了一个50px的阈值，你可以根据需要调整这个值。
- myNav.className = "...";: 这是动态修改元素CSS类的关键。当滚动距离超过50px时，我们将bg-dark类添加到导航栏的类列表中（同时保留其他必要的类）。当滚动回顶部时，bg-dark类被移除，导航栏恢复初始样式。
-
重要提示: 直接设置className会完全替换元素现有的所有类。对于更灵活的类操作（例如只添加/移除一个类而不影响其他类），推荐使用element.classList.add()和element.classList.remove()方法。例如：
// 使用 classList 替代 className if (window.scrollY > 50) { myNav.classList.add('bg-dark'); // 添加深色背景类 // myNav.classList.add('scrolled-bg'); // 如果使用自定义类 } else { myNav.classList.remove('bg-dark'); // 移除深色背景类 // myNav.classList.remove('scrolled-bg'); // 如果使用自定义类 }这种方法更健壮，因为它不会干扰已有的其他类。在实际项目中，建议优先使用classList API。
-
重要提示: 直接设置className会完全替换元素现有的所有类。对于更灵活的类操作（例如只添加/移除一个类而不影响其他类），推荐使用element.classList.add()和element.classList.remove()方法。例如：
5. 注意事项与优化
-
性能优化（滚动节流/防抖）: scroll事件触发非常频繁，频繁的DOM操作可能导致性能问题。在生产环境中，建议对scroll事件进行节流（throttle）或防抖（debounce）处理。
- 节流 (Throttle): 在一定时间间隔内只执行一次事件处理函数。
-
防抖 (Debounce): 在事件停止触发一段时间后才执行事件处理函数。
你可以使用Lodash等库提供的节流/防抖函数，或者自行实现。
// 简单的节流实现示例 function throttle(func, delay) { let timeoutId; let lastArgs; let lastThis; let lastResult; let lastCallTime = 0;
return function(...args) { const now = Date.now(); lastArgs = args; lastThis = this;
if (now - lastCallTime < delay) { if (timeoutId) clearTimeout(timeoutId); timeoutId = setTimeout(() => { lastCallTime = now; lastResult = func.apply(lastThis, lastArgs); timeoutId = null; }, delay - (now - lastCallTime)); } else { lastCallTime = now; lastResult = func.apply(lastThis, lastArgs); } return lastResult;}; }
// 将 navScroll 函数包装在节流函数中 // window.addEventListener('scroll', throttle(navScroll, 100));
CSS 类命名与管理: 教程中使用了Bootstrap的bg-dark类。如果你不使用Bootstrap或需要更精细的控制，可以定义自己的CSS类
