简介：这是一份面向前端初学者的HTML5+CSS3+JS小实例，解决页面滚动时固定导航栏因透明背景导致内容遮挡、可读性下降的问题，通过监听滚动距离让导航栏背景从透明渐变为半透明或纯色，同时协调文字颜色与阴影变化，适合网页设计练习、课程作业或快速搭建交互原型。资源共5个文件，包含1个HTML页面负责结构、1个CSS样式表控制渐变与动效、1张GIF动态演示图可直接预览交互效果、2张JPG效果截图展示不同滚动阶段的视觉状态，压缩包整体仅1.48MB，结构精简清晰，解压后即可运行体验。已有155人学习该实例，可作为学习原生JavaScript滚动事件与CSS3过渡动画的入门素材。通过该实例，读者能掌握window.scrollY或scrollTop的滚动位置判断、classList动态切换类名、CSS渐变与transition过渡的配合使用，理解常见导航栏交互的实现思路，并可在现有基础上二次修改，快速应用于个人项目或进一步扩展跳转、吸顶等特效。 滚动渐变导航栏，听名字像个比较常见的交互效果，拆开其实就是三件事：让导航固定在页面顶部、监听用户往下滚了多少、到了某个临界点就换个样式。我用原生 HTML+CSS+JS 把完整过程做了一遍，整个核心逻辑加起来没多少行，但对理解 DOM 操作、滚动事件和 CSS 过渡来说，是个很划算的练习项目。这篇文章会把完整代码直接摆出来，逐行解释关键判断逻辑，再把我实际开发里踩过的坑和排查思路一并整理给你，看完可以直接抄走改到自己项目里。
1. 先把滚动渐变导航栏的效果拆开看
1.1 这种导航到底解决了什么问题
很多产品官网、个人作品集、活动落地页都有这么个设计：页面刚打开时，顶部导航是透明的，背景里的 banner 大图直接延伸到导航底下，整体视觉非常干净；往下滚了一小段之后，导航慢慢浮现出一个半透明或实心的背景色，文字颜色也跟着变深，甚至多了一条淡淡的阴影。
这个需求背后其实是两件事的冲突。透明导航在首屏好看，但首屏滚动离开后，页面背景会变成各种内容区块，可能是白色背景、图片、卡片，如果导航还是透明的，菜单文字很容易和背景混在一起，可读性直接崩掉。所以需要判断用户滚动到哪个位置，再自动把导航切换到“有底色”的状态。
这个判断不需要非常精确，用户滚过 50px 还是 80px，体感差别不大，重要的是切换过程要自然。这也是我推荐用“滚动监听 + CSS 过渡”来实现的原因，简单、稳、性能可控，视觉上因为有 transition 的存在，也不是生硬地瞬变，而是有一个渐入渐出的过程。
1.2 三种常见实现方案的取舍
我在最初做这个效果时，先对比了几种实现方式。
- 方案 A：监听 scroll 事件，判断滚动距离后给导航容器添加或移除一个 class，由 CSS 的 transition 负责渐变。这也是本实例采用的方案。
- 方案 B：不监听滚动，直接用 JS 在每次滚动时计算导航栏的背景透明度，动态修改 inline style。能做到非常细腻的“滚动越多背景越深”的效果，但每次滚动都要操作样式，代码量和耦合度都会上升，而且刷新页面时状态恢复还要额外处理。
- 方案 C：纯 CSS 用 position: sticky 配合背景色。这个方案无法感知“滚动到哪一屏”，顶多只能处理一部分固定效果，透明渐变和颜色深浅变化基本做不到。
| 对比项 | 方案 A（class 切换） | 方案 B（实时修改 style） | 方案 C（纯 CSS sticky） |
|---|---|---|---|
| 逻辑复杂度 | 低 | 中 | 最低 |
| 视觉细腻度 | 足够 | 最细腻 | 有限 |
| 性能占用 | 低 | 中高 | 最低 |
| 可维护性 | 高 | 中 | 中 |
| 扩展示例（毛玻璃、隐藏导航） | 容易 | 一般 | 困难 |
方案 A 在绝大多数场景下是性价比最高的。它把“状态判断”和“样式变化”解耦了：JS 只负责回答“导航该不该加 scrolled 类”，CSS 只负责“加了之后长什么样、怎么过渡”。这样即使后续要扩展毛玻璃效果、换背景色、加阴影，只需要改 CSS 就行，不用动 JS。
2. 搭好页面骨架：HTML 结构与基础样式
2.1 HTML 结构怎么组织
我这里用一个典型的产品落地页结构来演示。导航栏是<header>，内部用一个.nav-inner容器做左右布局，左边是 LOGO，右边是菜单链接。页面主体用几个<section>撑出足够的滚动高度，每个区块设置一个 id，顺便配合锚点跳转。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5+CSS3+JS 滚动渐变导航栏</title> <link rel="stylesheet" href="style.css"> </head> <body> <header id="navbar" class="navbar"> <div class="nav-inner"> <a href="#home" class="logo">MY LOGO</a> <nav class="menu"> <a href="#home">首页</a> <a href="#about">关于我们</a> <a href="#services">核心服务</a> <a href="#contact">联系我</a> </nav> </div> </header> <main> <section id="home" class="section hero"> <h1>滚动页面，观察顶部导航变化</h1> <p>导航初始为透明状态，向下滚动后会出现背景色与阴影。</p> </section> <section id="about" class="section about"> <h2>关于我们</h2> </section> <section id="services" class="section services"> <h2>核心服务</h2> </section> <section id="contact" class="section contact"> <h2>联系方式</h2> </section> </main> <script src="script.js"></script> </body> </html>这个结构有一个容易被新手忽略的点：<header>必须放在所有内容之前，同时它本身不占用文档流高度，因为后面会设置position: fixed。页面第一个区块#home需要额外设置一个较大的顶部内边距或把背景做大，否则首屏内容会钻进导航底下。
2.2 CSS 先把导航固定在顶部
导航的基础样式有几个关键点：position: fixed用于固定在视口顶部；z-index设置一个足够大的层级，保证滚动到任何区块时导航都在最上层；初始背景是transparent；菜单文字颜色先设为白色，适配深色首屏背景的常见设计。
* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: #333; } .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: 999; } .nav-inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .logo { color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; } .menu a { color: #fff; text-decoration: none; margin-left: 28px; font-size: 15px; transition: color 0.3s ease; } .menu a:hover { opacity: 0.8; }这里的transition是关键，它让背景色、阴影、文字颜色都能在 class 切换的瞬间产生渐入渐变的效果。很多刚接触的同学会把这个 transition 写错位置，比如写在.scrolled里面，结果只有“从有背景到无背景”有过渡，从透明到有背景反而生硬，这是要注意的。过渡属性应该写在默认状态.navbar上，这样两个方向切换都会生效。
position: sticky和position: fixed在顶部导航场景里体验差别不大，但在某些复杂的滚动容器里，sticky 可能受父容器高度限制，fixed 更省心。这里直接选 fixed 最稳。
3. 滚动监听的核心逻辑与关键细节
3.1 滚动位置怎么取
JS 侧的第一步，是拿到页面当前滚动了多少距离。现代浏览器里最直接的属性是window.scrollY，它返回文档从顶部滚走的像素数。为了兼容一些旧写法，也可以写成window.pageYOffset，但那个属性现在已经不太需要了。
const navbar = document.getElementById('navbar'); const threshold = 60; function updateNavbar() { const scrollY = window.scrollY || document.documentElement.scrollTop; if (scrollY > threshold) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }关于document.documentElement.scrollTop，那是老式浏览器的取法。在标准模式下，document.documentElement是根元素，大部分滚动位置都在它身上；以前还有 document.body.scrollTop 的写法，现在基本不用了。你保留window.scrollY || document.documentElement.scrollTop这行兼容写法就行，绝大多数场景都覆盖得到。
3.2 阈值判断与 classList 切换
为什么用 class 切换而不是直接写一段navbar.style.backgroundColor = 'rgba(...)'？因为直接改 style 等于把视觉逻辑硬塞进 JS，后续想调整颜色、阴影、文字色，都得回到 JS 里翻代码。用 classList 之后，只要在 CSS 里维护.navbar.scrolled规则就行。
.navbar.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .navbar.scrolled .logo, .navbar.scrolled .menu a { color: #333; }我试过的阈值一般设在 50~80px 之间。如果设成 1px，用户手一抖，导航就立刻有背景，视觉上太敏感；设成 300px 以上，又会感觉导航“不跟手”。60px 是一个比较适合大多数页面的值，相当于用户刚刚滚过一个小段内容后，导航就自然切换。
3.3 初始化执行一次很关键
这个坑我第一次自己做的时候踩过。写完后刷新到页面中部，导航明明已经离顶部很远了，背景却还是透明的，菜单文字和白色页面重叠，直接看不见。原因很简单：updateNavbar只在 scroll 事件回调里执行，而刷新页面后如果用户没滚动，scroll 事件根本不会触发，函数自然没机会判断当前的位置。
解决方式是在页面初始化时主动调用一次：
window.addEventListener('scroll', updateNavbar, { passive: true }); updateNavbar();这个“初始化调用一次”的习惯，在做任何依赖滚动位置或视口状态的功能时都适用。比如回到顶部按钮、底部加载提示、侧边栏跟随定位，都要在加载时先同步一次状态，再等事件驱动更新。
3.4 事件监听的性能小细节
scroll 事件本身触发频率非常高，基本上每次滚动像素变化都会触发。不过当前这个例子只是add和remove一个 class，浏览器处理起来非常快，不需要额外优化。但如果你在回调里做了其他复杂计算，比如读取布局、遍历大量 DOM 节点，就可能出现卡顿。
一个简单的优化是在addEventListener里加{ passive: true }。它的含义是告诉浏览器，这个监听器不会调用preventDefault去阻止滚动，所以浏览器可以放心地先去滚动，再通知 JS，不用等事件处理完再滚动。这个参数对滚动类事件很实用，本身没有副作用，我建议你写滚动监听时顺手带上。
如果后续要做更复杂的联动，比如滚动进度条、视差动画，比较合理的做法是用requestAnimationFrame来处理，这里先不展开。
4. 加上渐变过渡：完整代码一步到位
4.1 transition 是怎么产生渐变的
很多人看到“滚动渐变导航栏”会觉得渐变是 JS 做的，其实 JS 做的只是“切换状态”，真正的视觉过渡全靠 CSStransition。
当navbar没有scrolled类时，背景是transparent，文字是白色；加上scrolled后，背景变成rgba(255,255,255,0.95)，文字变成深色。如果没有transition，这两个状态会在同一帧内瞬间切换，效果非常生硬。有了transition: background-color 0.3s ease, box-shadow 0.3s ease，浏览器会自动在状态变化时插入中间帧，于是我们看到的就是不到 0.3 秒的渐变过程。
0.3s这个时长是我比较推荐的，太快看不出渐变，太慢又会让用户觉得导航“黏糊糊”的。菜单文字的color同样可以加 transition，这样颜色变化也会柔和一些。
4.2 完整 Demo 代码
把这几个部分拼在一起，就是一个可以直接打开运行的完整页面。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5+CSS3+JS 滚动渐变导航栏</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; } .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: transparent; box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: 999; } .nav-inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .logo { color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; transition: color 0.3s ease; } .menu a { color: #fff; text-decoration: none; margin-left: 28px; font-size: 15px; transition: color 0.3s ease; } .navbar.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .navbar.scrolled .logo, .navbar.scrolled .menu a { color: #333; } .section { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero { background: linear-gradient(135deg, #1b2a4a, #2d4a7a); color: #fff; } .about { background: #f2f4f8; } .services { background: #e6e9f0; } .contact { background: #d8dce6; } </style> </head> <body> <header id="navbar" class="navbar"> <div class="nav-inner"> <a href="#home" class="logo">MY LOGO</a> <nav class="menu"> <a href="#home">首页</a> <a href="#about">关于我们</a> <a href="#services">核心服务</a> <a href="#contact">联系我</a> </nav> </div> </header> <main> <section id="home" class="section hero"> <h1>滚动页面，观察顶部导航变化</h1> <p>导航初始为透明状态，向下滚动后会出现背景色与阴影。</p> </section> <section id="about" class="section about"> <h2>关于我们</h2> </section> <section id="services" class="section services"> <h2>核心服务</h2> </section> <section id="contact" class="section contact"> <h2>联系方式</h2> </section> </main> <script> const navbar = document.getElementById('navbar'); const threshold = 60; function updateNavbar() { const scrollY = window.scrollY || document.documentElement.scrollTop; if (scrollY > threshold) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } } window.addEventListener('scroll', updateNavbar, { passive: true }); updateNavbar(); </script> </body> </html>4.3 细节优化：让导航看起来更精致
把基础效果跑通之后，我通常还会顺手做几个小优化。比如给导航栏内部加一点纵向内边距的过渡，滚动前高度是 64px，滚动后可以稍微收窄到 56px，配合一个height或padding的 transition，会有更有层次感的效果。
.navbar { height: 64px; transition: height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .navbar.scrolled { height: 56px; }需要注意的是，高度变化会影响.nav-inner内部的display: flex; align-items: center，因为容器高度变了，子元素会自动垂直居中，所以不用额外调整，这个效果天然成立。另外，如果你的导航里有带背景的按钮，比如“免费试用”“立即下载”，最好给按钮单独定义颜色，避免.scrolled下文字颜色被统一覆盖成深色后按钮对比度不够。
还有一个容易忽略的点：如果首屏 banner 是浅色背景，初始导航文字就不该是白色。一个更稳妥的做法是给导航的默认颜色设置一个中性色，比如#fff只用于深色首屏场景；如果页面首屏是浅色，默认文字颜色就用#333，scroll 后的变化方向反过来。逻辑完全一样，只需要调整 CSS 的颜色值。
5. 常见问题排查与避坑记录
5.1 导航栏背景出来了，但菜单文字看不见
这个通常发生在初始状态。透明背景 + 白色文字，页面首屏如果刚好是浅色背景，白字就融进背景里了。排查顺序是：先确认首屏区块的背景色，再检查.navbar默认状态下的color设置，最后看.navbar a是否显式设置了颜色。
如果首屏是深色图，就用白色文字；如果首屏是浅色图，就换成深色文字。要是首屏不确定，也可以给导航初始状态加一个非常淡的黑色渐变背景，比如linear-gradient(rgba(0,0,0,0.3), transparent)，既保持视觉透明感，又能兜底保证文字可读。
5.2 刷新页面后导航状态处于错误模样
我在前面 3.3 小节提过，这基本就是初始化没调用updateNavbar()造成的。这个问题的复现路径很固定：打开页面，滚到中间，按 F5 刷新，然后就看到一个毫无背景的透明导航。因为刷新之后浏览器通常不会自动触发 scroll 事件，所以一次性状态同步必须在初始化时手动完成。
5.3 滚动事件太频繁，页面掉帧
如果导航切换的同时，页面里还有其他监听 scroll 的组件，比如懒加载图片、视差动画、回到顶部按钮，累计的计算量会明显上升。这时候可以做简单的节流，或者使用requestAnimationFrame合并多次回调。
let ticking = false; function updateNavbar() { if (!ticking) { requestAnimationFrame(function () { const scrollY = window.scrollY || document.documentElement.scrollTop; if (scrollY > threshold) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } ticking = false; }); ticking = true; } }这个写法本质上是把每帧内可能多次触发的 scroll 回调合并成一次，减少重复操作。对于这个 Demo 来说属于锦上添花，但如果你准备把它放进一个组件密集的项目里，这行逻辑值得保留。
5.4 锚点跳转后导航渐变状态没刷新
点击菜单锚点跳转到某个 section 时，页面会快速滚动，正常情况下 scroll 事件会多次触发，导航状态会随之更新。但某些移动端浏览器或者滚动容器嵌套场景中，事件可能延迟触发，导致跳转完成后导航背景还是旧的。
稳妥的办法是在菜单链接的 click 事件里手动更新一次状态，或者干脆在scrollend事件里处理。scrollend是较新的浏览器事件，兼容性还需要观察，所以日常代码里还是以 click 手动补一次为主。
document.querySelectorAll('.menu a').forEach(function (link) { link.addEventListener('click', function () { updateNavbar(); }); });这种“监听事件 + 关键操作后主动同步”的思路，比单纯依赖事件驱动的实现要稳很多。所有依赖瞬时状态的 UI，都应该在可能改变状态的行为发生时再确认一次。
5.5 移动端和嵌套页面的兼容性问题
移动端竖屏时页面宽度窄，导航菜单如果项目多，容易超出屏幕宽度。这时候可以不加菜单左侧 margin，或者媒体查询里缩小字号。另外，如果页面被嵌进 iframe，iframe 内部的滚动事件不会影响父页面的window.scrollY，所以这类效果必须在 iframe 内部文档上实现，不能指望父页面传值。
还有一个隐蔽问题：某些情况下window.scrollY为 0，但页面确实滚动了。这种情况通常发生在滚动容器不是视口的时候，比如某个 div 设置了overflow-y: auto。这时window.scrollY拿不到滚动位置，要换成监听那个容器的scroll事件，并用container.scrollTop取值。判断一个 DOM 元素是否可滚动，可以检查它的scrollHeight是否大于clientHeight。
6. 延伸玩法：同一个滚动监听的更多应用
6.1 给导航加上毛玻璃效果
渐变导航栏升级为毛玻璃效果是非常自然的延伸。只需要在.navbar.scrolled里再加上一行backdrop-filter，背景色改成半透明，浅色内容从导航底下透过来时，会有一层模糊感，观感很精致。
.navbar.scrolled { background: rgba(255, 255, 255, 0.75); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }backdrop-filter 对浏览器性能略有影响，如果页面很长、滚动内容很多，建议只在滚动后加毛玻璃，不要在初始状态加，避免整页都处于实时模糊状态。
6.2 按滚动方向控制导航显示和隐藏
很多网站在用户向下滚动时隐藏导航，向上滚动时重新显示，用来给内容腾出更多空间。实现思路是在updateNavbar里记录上一次的滚动位置，对比当前滚动位置判断方向。
let lastScrollY = 0; function handleDirection() { const scrollY = window.scrollY; if (scrollY > lastScrollY && scrollY > threshold) { navbar.style.transform = 'translateY(-100%)'; } else { navbar.style.transform = 'translateY(0)'; } lastScrollY = scrollY; }给.navbar加上transition: transform 0.3s ease，导航就会有平滑的滑出滑入效果。
6.3 配合顶部进度条
在同一个 scroll 回调里，计算一下页面滚动百分比，就能顺便驱动一个顶部进度条。这个玩法很适合文章页、指南页，很多人会在文章开头放一个固定顶部进度条，提示阅读进度。
function updateProgress() { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; document.getElementById('progressBar').style.width = percent + '%'; }6.4 把阈值做成可配置参数
如果这组逻辑会在多个页面使用，我建议直接封装成一个小函数，把导航元素、阈值、回调都做成参数。
function initScrollNavbar(options) { const navbar = options.navbar; const threshold = options.threshold || 60; const onChange = options.onChange || function () {}; function update() { const scrollY = window.scrollY; if (scrollY > threshold) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } onChange(scrollY); } window.addEventListener('scroll', update, { passive: true }); update(); } initScrollNavbar({ navbar: document.getElementById('navbar'), threshold: 80, onChange: function (scrollY) { // 这里放进度条或其他联动逻辑 } });封装之后，同一个项目里多个页面都能复用，想改阈值、加联动物理，不需要再复制一堆 JS 到处贴。
最后说一句我自己实操下来的感受：滚动渐变导航栏这个小例子，看着不起眼，但它把“事件驱动”“状态管理”“CSS 过渡”“兼容性处理”这几个前端基础问题全串起来了。你把它完整手写过一遍，再去看其他依赖滚动监听的组件，比如回到顶部、侧边栏跟随、懒加载，思路会通得很快。建议你拿到代码后别只复制，亲手把阈值从 60 改成 200，把过渡时间从 0.3s 改成 1s，把背景色换成半透明毛玻璃，每种改法跑一遍，才能感受到这些参数对视觉和交互的影响到底有多大。
本文还有配套的精品资源，点击获取
