本教程详细介绍了如何使用纯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 替代 classNameif (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。
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 { 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类
以上就是在网页滚动时动态改变导航栏背景色的实现指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1590452.html
微信扫一扫 
支付宝扫一扫 
