本教程详细介绍了如何使用纯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”。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滚动时导航栏背景变化</title> <link rel="stylesheet" href="https://cdnJS.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css"> <!-- 引入自定义CSS --> </head> <body> <div id="myNav" class="navigation-wrap start-header start-style"> <div class="container"> <div class="row"> <div class="col-12"> <nav class="navbar navbar-expand-md navbar-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto py-4 py-md-0"> <li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4 active"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Home</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </li> <li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4"> <a class="nav-link" href="#">Blogs</a> </li> <li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> </div> </div> </div> </div> <!-- 确保页面有足够高度以触发滚动 --> <div style="min-height: 150vh; background-color: #f8f9fa; padding-top: 100px; text-align: center;"> <h1>向下滚动查看导航栏变化</h1> <p>页面内容区域...</p> </div> <script src="script.js"></script> <!-- 引入自定义JavaScript --> </body> </html>
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类