简介这是一份面向前端初学者与进阶练习者的滚动渐变导航栏实战小实例围绕HTML5、CSS3与JavaScript三项核心技术展开帮助读者理解页面滚动时导航栏背景色与透明度动态变化的实现思路适合用于个人练习、课程作业或小型项目中的导航组件参考。资源包共5个文件包含1个html页面、1个css样式表、2张jpg图片素材以及1个gif动效演示压缩包整体约1.48MB结构精简便于直接打开运行与对照修改。目前已有156人学习下载可作为前端交互练习的参考案例。通过该实例读者能够掌握滚动事件监听、样式动态切换与过渡动画的配合方式理解导航栏在不同滚动位置下的视觉反馈逻辑并借助图片素材与动效演示快速还原效果适合作为巩固DOM操作与CSS3过渡知识的练手素材。1. 滚动渐变导航栏从透明到实心的那条临界线在哪页面顶部一条完全透明的导航栏用户往下滚了 200px 之后它慢慢变成白底加阴影——这个效果你在绝大多数官网、后台、落地页上都见过。它叫滚动渐变导航栏用 HTML5 搭结构、CSS3 做过渡、JS 监听滚动位置来切换状态三件套各管一段谁都不越界。很多人第一次做会写成「滚动超过某个值就加个 class」能跑但滚回去的时候闪、移动端卡、iOS 上还会因为地址栏收缩导致阈值乱跳。真正要解决的问题不是「怎么加 class」而是「在哪一刻切、用什么驱动切、切的时候怎么不抖」。这篇面向的是已经会写基础 HTMLCSSJS、想把这类交互做扎实的前端从最小可跑版本一路讲到 requestAnimationFrame 节流、IntersectionObserver 替代方案和移动端适配的边界。看完你能直接抄走一套结构也能判断什么场景下不该用滚动监听。2. 三种实现路线scroll 监听、IntersectionObserver 和纯 CSS 的取舍2.1 先想清楚「渐变」到底渐变的是什么很多人一上来就写 JS其实得先把视觉目标拆开。滚动渐变导航栏的「渐变」通常包含三层变化背景色从 transparent 到某个实色、文字颜色从浅到深或反过来、阴影从无到有。这三层可以同时发生也可以错开。错开是有意义的——背景先变、文字后变视觉上更顺因为文字颜色突变比背景突变更刺眼。从实现机制看能驱动这三层变化的手段有三种。第一种是 JS 监听 scroll 事件读 scrollTop超过阈值就给导航栏加一个 .scrolled 类CSS 里用 transition 做过渡。第二种是 IntersectionObserver观察页面顶部一个哨兵元素它离开视口就触发切换。第三种是纯 CSS 的 scroll-driven animations用 animation-timeline: scroll() 直接把滚动进度映射到样式不需要 JS。选型不是看哪个新而是看你的兼容底线和交互复杂度。如果只需要「过线变色」这种二元切换IntersectionObserver 最省心它不占用主线程滚动时不会掉帧。如果要做「随滚动进度连续变化」比如背景透明度跟滚动距离线性相关scroll-driven animations 最干净但目前兼容性还有限得留降级。如果要做「多个阈值、多个元素联动」那还是老老实实 scroll 监听加节流可控性最强。我一般的判断顺序是先问是不是二元切换是就 IntersectionObserver再问要不要连续映射要就 scroll-driven 加降级剩下复杂联动才上 scroll 监听。下面三节分别给最小可跑代码。2.2 scroll 监听版最小可跑结构先给 HTML 骨架导航栏固定在顶部下面放足够高的内容让页面能滚。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title滚动渐变导航栏/title link relstylesheet hrefstyle.css /head body !-- 导航栏初始透明滚动后加 .scrolled -- header classnavbar idnavbar div classlogoBrand/div nav classmenu a href#首页/a a href#产品/a a href#关于/a /nav /header !-- 首屏内容故意做高保证能滚动 -- section classhero向下滚动看导航栏变化/section section classcontent正文内容区域/section script srcmain.js/script /body /htmlCSS 负责两件事固定定位以及定义 .scrolled 状态下的样式和过渡。/* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } .navbar { position: fixed; /* 固定在顶部 */ top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: transparent; /* 初始透明 */ color: #fff; /* 只过渡需要的属性别写 all */ transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; z-index: 1000; } /* 滚动后的实心状态 */ .navbar.scrolled { background: #ffffff; color: #1a1a1a; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); } .hero { height: 100vh; background: linear-gradient(135deg, #4a6cf7, #7b3ff2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; } .content { height: 150vh; padding: 40px; }JS 只做一件事读滚动位置决定加不加类。// 缓存 DOM 引用避免每次滚动都查询 const navbar document.getElementById(navbar); // 阈值滚动超过 80px 就切换可按首屏高度调整 const THRESHOLD 80; let ticking false; function updateNavbar() { const scrolled window.scrollY THRESHOLD; // classList.toggle 第二个参数为 true 时添加false 时移除 navbar.classList.toggle(scrolled, scrolled); ticking false; } window.addEventListener(scroll, () { // requestAnimationFrame 节流一帧内只执行一次 if (!ticking) { window.requestAnimationFrame(updateNavbar); ticking true; } }, { passive: true }); // passive 告诉浏览器不阻止默认滚动提升移动端性能逻辑说明scroll 事件触发频率极高直接在里面操作 DOM 会导致布局抖动。用 requestAnimationFrame 把更新压到每帧一次配合 ticking 标志位防止重复排队。{ passive: true }是关键它让浏览器知道这个监听器不会调用 preventDefault从而可以立即滚动而不等待 JS 执行移动端体感差别明显。参数说明THRESHOLD 是切换阈值设成 0 就是「一滚就变」设成首屏高度就是「滚过首屏才变」。实际项目里我一般取导航栏高度的 1.5 到 2 倍64px 的导航栏取 80 到 120 之间比较自然。transition 的时长 0.3s 是经验值低于 0.2s 显得生硬高于 0.5s 会拖沓。2.3 IntersectionObserver 版不碰主线程的切换思路是在导航栏正下方放一个高度为 1px 的哨兵元素它滚出视口顶部时说明用户已经滚过导航栏高度此时切换状态。header classnavbar idnavbar.../header !-- 哨兵紧贴导航栏下方高度 1px不可见 -- div classsentinel idsentinel/divconst navbar document.getElementById(navbar); const sentinel document.getElementById(sentinel); // rootMargin 顶部留出导航栏高度让触发点对齐导航栏底边 const observer new IntersectionObserver( ([entry]) { // isIntersecting 为 false 表示哨兵已滚出视口顶部 navbar.classList.toggle(scrolled, !entry.isIntersecting); }, { rootMargin: -64px 0px 0px 0px, threshold: 0 } ); observer.observe(sentinel);逻辑说明IntersectionObserver 的回调只在交叉状态变化时触发滚动过程中不产生任何 JS 执行性能比 scroll 监听好一个量级。rootMargin 的-64px表示把观察区域的顶部内缩 64px正好是导航栏高度这样哨兵一碰到导航栏底边就触发视觉上切换点和 scroll 版一致。参数说明threshold 设 0 表示只要有一像素交叉就触发。rootMargin 的负值用来调整触发时机想让切换更早发生就把负值调小更晚就调大。这个方案在 iOS Safari 上表现稳定不受地址栏收缩影响因为它基于视口交叉而非具体滚动像素。2.4 纯 CSS scroll-driven 版连续映射的写法如果想让背景透明度随滚动连续变化而不是二元切换可以用 scroll-driven animations。注意这个特性目前需要较新浏览器生产环境要配降级。.navbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; /* 用动画驱动背景色时间轴绑定到滚动 */ animation: nav-bg linear both; animation-timeline: scroll(root block); animation-range: 0 200px; /* 滚动 0 到 200px 之间完成动画 */ } keyframes nav-bg { from { background: rgba(255, 255, 255, 0); color: #fff; } to { background: rgba(255, 255, 255, 1); color: #1a1a1a; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); } }逻辑说明animation-timeline 把动画进度绑定到滚动容器的滚动进度animation-range 限定在 0 到 200px 之间。这样滚动 100px 时背景正好半透明是真正的连续映射不需要任何 JS。参数说明animation-range 的第一个值是起始滚动位置第二个是结束位置单位可以是 px 或百分比。用scroll(root block)表示监听根滚动容器的块轴方向。降级方案是保留前面的 scroll 监听版用supports (animation-timeline: scroll())做特性检测不支持时走 JS 分支。3. 阈值、过渡和性能三个必须调对的参数3.1 阈值不是拍脑袋定的阈值决定了导航栏在哪个滚动位置切换。定得太小用户刚滚一点就变感觉突兀定得太大首屏内容都滚完了才变用户会觉得导航栏一直透明看不清。合理的做法是让阈值和首屏视觉重心对齐。如果首屏是一张全屏大图导航栏文字是白色那阈值应该设在「大图底部即将离开视口」的位置通常是视口高度的 60% 到 80%。如果首屏是浅色背景导航栏文字本来就是深色那阈值可以设小一点甚至不需要切换背景只加阴影即可。我一般会先在浏览器里手动滚找到视觉上「该变了」的那个点用window.scrollY打印出来再取整。别用固定值 100 或 200 套所有页面不同首屏高度差很多。3.2 transition 只写需要的属性CSS 里写transition: all .3s是常见的偷懒写法但它会让所有可过渡属性都参与动画包括你不想动的 width、height、padding。滚动时如果导航栏内部有布局变化all 会引发额外的重排和重绘移动端直接掉帧。正确做法是只列需要过渡的属性background-color、box-shadow、color。如果文字颜色变化想慢一点可以单独给 color 设更长的时长做出错峰效果。.navbar { transition: background-color .3s ease, box-shadow .3s ease, color .2s ease .1s; /* 延迟 0.1s等背景先变 */ }3.3 移动端滚动监听的三个坑第一个坑是 iOS 的橡皮筋效果。页面滚到顶部继续下拉时scrollY 会变成负值如果阈值判断写的是scrollY THRESHOLD负值不会触发没问题但如果写的是Math.abs(scrollY) THRESHOLD就会误触发。别用绝对值。第二个坑是地址栏收缩。移动端浏览器滚动时地址栏会收起视口高度变化如果阈值是基于window.innerHeight计算的会在滚动过程中跳变。解决办法是用固定像素阈值或者用 IntersectionObserver 基于视口交叉判断。第三个坑是滚动方向判断。有些设计是「向下滚隐藏导航栏向上滚显示」这需要记录上一次的 scrollY 做差值。差值判断要加一个最小位移量比如 5px否则手指微抖就会来回切换视觉上像抽搐。let lastY 0; const MIN_DELTA 5; // 最小位移过滤抖动 function onScroll() { const y window.scrollY; const delta y - lastY; if (Math.abs(delta) MIN_DELTA) return; // 位移太小忽略 if (delta 0 y 64) { navbar.classList.add(hidden); // 向下滚隐藏 } else { navbar.classList.remove(hidden); // 向上滚显示 } lastY y; }4. 避坑排查滚动渐变导航栏最常见的五个翻车现场4.1 滚回去的时候导航栏闪一下才变透明现象往下滚导航栏变白往上滚回顶部时导航栏先闪一下白色再变透明或者过渡不连贯。原因scroll 事件在快速滚动时可能丢帧classList.toggle 在临界点附近反复切换transition 被不断打断重启。另外如果阈值判断用的是和混用临界点会抖动。解决确保切换逻辑是幂等的用 toggle 的第二个参数明确指定目标状态而不是手动 add/remove。同时在临界点加一点迟滞hysteresis比如向下滚超过 80px 才加类向上滚回到 60px 才移除中间 20px 是缓冲带。const ON 80, OFF 60; function update() { const y window.scrollY; if (y ON) navbar.classList.add(scrolled); else if (y OFF) navbar.classList.remove(scrolled); // 在 60 到 80 之间保持当前状态不变 }4.2 移动端滚动时导航栏文字颜色突变现象背景色是平滑过渡的但文字颜色一瞬间从白变黑很突兀。原因文字颜色可能被写在.navbar.scrolled a这种后代选择器里而 transition 只写在 .navbar 上后代元素没有继承过渡属性。解决把 transition 写在所有会变色的元素上或者用 CSS 变量统一控制。用变量的话只过渡变量本身所有引用它的属性一起平滑变化。.navbar { --nav-fg: #fff; --nav-bg: transparent; color: var(--nav-fg); background: var(--nav-bg); transition: --nav-fg .3s, --nav-bg .3s; /* 需要 property 注册才能过渡变量 */ }注意CSS 变量默认不能过渡需要用property注册类型。兼容性要求高的话还是老老实实给每个属性写 transition。4.3 页面内容被固定导航栏挡住现象导航栏固定后页面第一屏内容顶部被遮住一截锚点跳转也对不准位置。原因position: fixed 让导航栏脱离文档流不占空间下面的内容从页面顶部开始排。解决给 body 或首个 section 加 padding-top值等于导航栏高度。锚点跳转用 scroll-margin-top 处理。body { padding-top: 64px; } /* 或者只给首屏加 */ .hero { padding-top: 64px; } /* 锚点目标元素留出导航栏空间 */ section[id] { scroll-margin-top: 64px; }4.4 滚动时页面卡顿、掉帧现象滚动不跟手导航栏变化有延迟低端安卓机上尤其明显。原因scroll 回调里做了重排操作比如读 offsetHeight、getBoundingClientRect或者改了会影响布局的属性。读写交替会强制同步布局。解决回调里只做 class 切换不读布局信息。如果必须读先在滚动开始前缓存。另外确认加了{ passive: true }并且用 requestAnimationFrame 节流。如果还卡直接换 IntersectionObserver。4.5 首屏加载时导航栏状态错误现象页面刷新时如果浏览器恢复了上次的滚动位置导航栏可能停在错误状态——明明在顶部却显示实心或者滚到中间却还是透明。原因初始化时没有根据当前 scrollY 同步一次状态只依赖 scroll 事件而恢复滚动位置不一定触发 scroll。解决页面加载后立即调用一次更新函数并且监听 pageshow 事件处理浏览器缓存恢复的情况。// 初始化时同步一次 updateNavbar(); // 处理浏览器前进后退恢复滚动位置 window.addEventListener(pageshow, updateNavbar);5. 进阶用 CSS 变量做主题化渐变以及一个验证技巧做到这里基本功能已经稳了。但实际项目里导航栏往往不止一种状态——首页透明、内页实心、深色模式又要换一套颜色。如果每个状态都写一遍 CSS维护起来很痛苦。我的做法是用 CSS 变量把「透明态」和「实心态」抽成两组变量切换时只换变量值。.navbar { --bg: transparent; --fg: #ffffff; --shadow: none; background: var(--bg); color: var(--fg); box-shadow: var(--shadow); transition: background-color .3s, color .3s, box-shadow .3s; } .navbar.scrolled { --bg: #ffffff; --fg: #1a1a1a; --shadow: 0 2px 12px rgba(0, 0, 0, .08); } /* 深色模式只覆盖变量不动结构 */ media (prefers-color-scheme: dark) { .navbar.scrolled { --bg: #1a1a1a; --fg: #f5f5f5; --shadow: 0 2px 12px rgba(0, 0, 0, .4); } }这样切换逻辑还是那一个 class但视觉表现可以无限扩展。内页需要默认实心就在 HTML 上直接加 .scrolled 类JS 初始化时会根据滚动位置决定是否移除逻辑自洽。验证技巧方面我习惯用 Chrome DevTools 的 Rendering 面板打开「Paint flashing」滚动页面时看导航栏区域有没有频繁重绘。正常情况下只有状态切换的那一两帧会闪绿如果滚动全程都在闪说明有属性在持续触发重绘通常是 box-shadow 或 background 被写在了会频繁变化的元素上。另一个技巧是在 Performance 面板录一段滚动看主线程有没有长任务如果有超过 50ms 的任务基本就是 scroll 回调里做了重活。还有一个容易被忽略的点will-change别乱加。有人为了「优化」给导航栏加will-change: background-color结果浏览器提前把它提升为合成层反而增加内存占用。只在确实观察到掉帧、且确认是合成问题时才加加完要测。最后说个我自己的习惯。每次做完这类滚动交互我都会在真机上从顶部快速甩到底部再甩回来重复十几次看有没有状态错乱。模拟器永远测不出 iOS 橡皮筋和安卓惯性滚动的真实表现。这个动作花不了一分钟但能挡掉大部分上线后才会暴露的玄学 bug。希望帮到你。本文还有配套的精品资源点击获取