簡介這是一份面向前端初學者與進階練習者的滾動漸變導航欄實戰(zhàn)小實例圍繞HTML5、CSS3與JavaScript三項核心技術展開幫助讀者理解頁面滾動時導航欄背景色與透明度動態(tài)變化的實現(xiàn)思路適合用于個人練習、課程作業(yè)或小型項目中的導航組件參考。資源包共5個文件包含1個html頁面、1個css樣式表、2張jpg圖片素材以及1個gif動效演示壓縮包整體約1.48MB結構精簡便于直接打開運行與對照修改。目前已有156人學習下載可作為前端交互練習的參考案例。通過該實例讀者能夠掌握滾動事件監(jiān)聽、樣式動態(tài)切換與過渡動畫的配合方式理解導航欄在不同滾動位置下的視覺反饋邏輯并借助圖片素材與動效演示快速還原效果適合作為鞏固DOM操作與CSS3過渡知識的練手素材。1. 滾動漸變導航欄從透明到實心的那條臨界線在哪頁面頂部一條完全透明的導航欄用戶往下滾了 200px 之后它慢慢變成白底加陰影——這個效果你在絕大多數(shù)官網(wǎng)、后臺、落地頁上都見過。它叫滾動漸變導航欄用 HTML5 搭結構、CSS3 做過渡、JS 監(jiān)聽滾動位置來切換狀態(tài)三件套各管一段誰都不越界。很多人第一次做會寫成「滾動超過某個值就加個 class」能跑但滾回去的時候閃、移動端卡、iOS 上還會因為地址欄收縮導致閾值亂跳。真正要解決的問題不是「怎么加 class」而是「在哪一刻切、用什么驅動切、切的時候怎么不抖」。這篇面向的是已經會寫基礎 HTMLCSSJS、想把這類交互做扎實的前端從最小可跑版本一路講到 requestAnimationFrame 節(jié)流、IntersectionObserver 替代方案和移動端適配的邊界?？赐昴隳苤苯映咭惶捉Y構也能判斷什么場景下不該用滾動監(jiān)聽。2. 三種實現(xiàn)路線scroll 監(jiān)聽、IntersectionObserver 和純 CSS 的取舍2.1 先想清楚「漸變」到底漸變的是什么很多人一上來就寫 JS其實得先把視覺目標拆開。滾動漸變導航欄的「漸變」通常包含三層變化背景色從 transparent 到某個實色、文字顏色從淺到深或反過來、陰影從無到有。這三層可以同時發(fā)生也可以錯開。錯開是有意義的——背景先變、文字后變視覺上更順因為文字顏色突變比背景突變更刺眼。從實現(xiàn)機制看能驅動這三層變化的手段有三種。第一種是 JS 監(jiān)聽 scroll 事件讀 scrollTop超過閾值就給導航欄加一個 .scrolled 類CSS 里用 transition 做過渡。第二種是 IntersectionObserver觀察頁面頂部一個哨兵元素它離開視口就觸發(fā)切換。第三種是純 CSS 的 scroll-driven animations用 animation-timeline: scroll() 直接把滾動進度映射到樣式不需要 JS。選型不是看哪個新而是看你的兼容底線和交互復雜度。如果只需要「過線變色」這種二元切換IntersectionObserver 最省心它不占用主線程滾動時不會掉幀。如果要做「隨滾動進度連續(xù)變化」比如背景透明度跟滾動距離線性相關scroll-driven animations 最干凈但目前兼容性還有限得留降級。如果要做「多個閾值、多個元素聯(lián)動」那還是老老實實 scroll 監(jiān)聽加節(jié)流可控性最強。我一般的判斷順序是先問是不是二元切換是就 IntersectionObserver再問要不要連續(xù)映射要就 scroll-driven 加降級剩下復雜聯(lián)動才上 scroll 監(jiān)聽。下面三節(jié)分別給最小可跑代碼。2.2 scroll 監(jiān)聽版最小可跑結構先給 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正文內容區(qū)域/section script srcmain.js/script /body /htmlCSS 負責兩件事固定定位以及定義 .scrolled 狀態(tài)下的樣式和過渡。/* 基礎重置 */ * { 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; } /* 滾動后的實心狀態(tài) */ .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 第二個參數(shù)為 true 時添加false 時移除 navbar.classList.toggle(scrolled, scrolled); ticking false; } window.addEventListener(scroll, () { // requestAnimationFrame 節(jié)流一幀內只執(zhí)行一次 if (!ticking) { window.requestAnimationFrame(updateNavbar); ticking true; } }, { passive: true }); // passive 告訴瀏覽器不阻止默認滾動提升移動端性能邏輯說明scroll 事件觸發(fā)頻率極高直接在里面操作 DOM 會導致布局抖動。用 requestAnimationFrame 把更新壓到每幀一次配合 ticking 標志位防止重復排隊。{ passive: true }是關鍵它讓瀏覽器知道這個監(jiān)聽器不會調用 preventDefault從而可以立即滾動而不等待 JS 執(zhí)行移動端體感差別明顯。參數(shù)說明THRESHOLD 是切換閾值設成 0 就是「一滾就變」設成首屏高度就是「滾過首屏才變」。實際項目里我一般取導航欄高度的 1.5 到 2 倍64px 的導航欄取 80 到 120 之間比較自然。transition 的時長 0.3s 是經驗值低于 0.2s 顯得生硬高于 0.5s 會拖沓。2.3 IntersectionObserver 版不碰主線程的切換思路是在導航欄正下方放一個高度為 1px 的哨兵元素它滾出視口頂部時說明用戶已經滾過導航欄高度此時切換狀態(tài)。header classnavbar idnavbar.../header !-- 哨兵緊貼導航欄下方高度 1px不可見 -- div classsentinel idsentinel/divconst navbar document.getElementById(navbar); const sentinel document.getElementById(sentinel); // rootMargin 頂部留出導航欄高度讓觸發(fā)點對齊導航欄底邊 const observer new IntersectionObserver( ([entry]) { // isIntersecting 為 false 表示哨兵已滾出視口頂部 navbar.classList.toggle(scrolled, !entry.isIntersecting); }, { rootMargin: -64px 0px 0px 0px, threshold: 0 } ); observer.observe(sentinel);邏輯說明IntersectionObserver 的回調只在交叉狀態(tài)變化時觸發(fā)滾動過程中不產生任何 JS 執(zhí)行性能比 scroll 監(jiān)聽好一個量級。rootMargin 的-64px表示把觀察區(qū)域的頂部內縮 64px正好是導航欄高度這樣哨兵一碰到導航欄底邊就觸發(fā)視覺上切換點和 scroll 版一致。參數(shù)說明threshold 設 0 表示只要有一像素交叉就觸發(fā)。rootMargin 的負值用來調整觸發(fā)時機想讓切換更早發(fā)生就把負值調小更晚就調大。這個方案在 iOS Safari 上表現(xiàn)穩(wěn)定不受地址欄收縮影響因為它基于視口交叉而非具體滾動像素。2.4 純 CSS scroll-driven 版連續(xù)映射的寫法如果想讓背景透明度隨滾動連續(xù)變化而不是二元切換可以用 scroll-driven animations。注意這個特性目前需要較新瀏覽器生產環(huán)境要配降級。.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 時背景正好半透明是真正的連續(xù)映射不需要任何 JS。參數(shù)說明animation-range 的第一個值是起始滾動位置第二個是結束位置單位可以是 px 或百分比。用scroll(root block)表示監(jiān)聽根滾動容器的塊軸方向。降級方案是保留前面的 scroll 監(jiān)聽版用supports (animation-timeline: scroll())做特性檢測不支持時走 JS 分支。3. 閾值、過渡和性能三個必須調對的參數(shù)3.1 閾值不是拍腦袋定的閾值決定了導航欄在哪個滾動位置切換。定得太小用戶剛滾一點就變感覺突兀定得太大首屏內容都滾完了才變用戶會覺得導航欄一直透明看不清。合理的做法是讓閾值和首屏視覺重心對齊。如果首屏是一張全屏大圖導航欄文字是白色那閾值應該設在「大圖底部即將離開視口」的位置通常是視口高度的 60% 到 80%。如果首屏是淺色背景導航欄文字本來就是深色那閾值可以設小一點甚至不需要切換背景只加陰影即可。我一般會先在瀏覽器里手動滾找到視覺上「該變了」的那個點用window.scrollY打印出來再取整。別用固定值 100 或 200 套所有頁面不同首屏高度差很多。3.2 transition 只寫需要的屬性CSS 里寫transition: all .3s是常見的偷懶寫法但它會讓所有可過渡屬性都參與動畫包括你不想動的 width、height、padding。滾動時如果導航欄內部有布局變化all 會引發(fā)額外的重排和重繪移動端直接掉幀。正確做法是只列需要過渡的屬性background-color、box-shadow、color。如果文字顏色變化想慢一點可以單獨給 color 設更長的時長做出錯峰效果。.navbar { transition: background-color .3s ease, box-shadow .3s ease, color .2s ease .1s; /* 延遲 0.1s等背景先變 */ }3.3 移動端滾動監(jiān)聽的三個坑第一個坑是 iOS 的橡皮筋效果。頁面滾到頂部繼續(xù)下拉時scrollY 會變成負值如果閾值判斷寫的是scrollY THRESHOLD負值不會觸發(fā)沒問題但如果寫的是Math.abs(scrollY) THRESHOLD就會誤觸發(fā)。別用絕對值。第二個坑是地址欄收縮。移動端瀏覽器滾動時地址欄會收起視口高度變化如果閾值是基于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. 避坑排查滾動漸變導航欄最常見的五個翻車現(xiàn)場4.1 滾回去的時候導航欄閃一下才變透明現(xiàn)象往下滾導航欄變白往上滾回頂部時導航欄先閃一下白色再變透明或者過渡不連貫。原因scroll 事件在快速滾動時可能丟幀classList.toggle 在臨界點附近反復切換transition 被不斷打斷重啟。另外如果閾值判斷用的是和混用臨界點會抖動。解決確保切換邏輯是冪等的用 toggle 的第二個參數(shù)明確指定目標狀態(tài)而不是手動 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 之間保持當前狀態(tài)不變 }4.2 移動端滾動時導航欄文字顏色突變現(xiàn)象背景色是平滑過渡的但文字顏色一瞬間從白變黑很突兀。原因文字顏色可能被寫在.navbar.scrolled a這種后代選擇器里而 transition 只寫在 .navbar 上后代元素沒有繼承過渡屬性。解決把 transition 寫在所有會變色的元素上或者用 CSS 變量統(tǒng)一控制。用變量的話只過渡變量本身所有引用它的屬性一起平滑變化。.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 頁面內容被固定導航欄擋住現(xiàn)象導航欄固定后頁面第一屏內容頂部被遮住一截錨點跳轉也對不準位置。原因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 滾動時頁面卡頓、掉幀現(xiàn)象滾動不跟手導航欄變化有延遲低端安卓機上尤其明顯。原因scroll 回調里做了重排操作比如讀 offsetHeight、getBoundingClientRect或者改了會影響布局的屬性。讀寫交替會強制同步布局。解決回調里只做 class 切換不讀布局信息。如果必須讀先在滾動開始前緩存。另外確認加了{ passive: true }并且用 requestAnimationFrame 節(jié)流。如果還卡直接換 IntersectionObserver。4.5 首屏加載時導航欄狀態(tài)錯誤現(xiàn)象頁面刷新時如果瀏覽器恢復了上次的滾動位置導航欄可能停在錯誤狀態(tài)——明明在頂部卻顯示實心或者滾到中間卻還是透明。原因初始化時沒有根據(jù)當前 scrollY 同步一次狀態(tài)只依賴 scroll 事件而恢復滾動位置不一定觸發(fā) scroll。解決頁面加載后立即調用一次更新函數(shù)并且監(jiān)聽 pageshow 事件處理瀏覽器緩存恢復的情況。// 初始化時同步一次 updateNavbar(); // 處理瀏覽器前進后退恢復滾動位置 window.addEventListener(pageshow, updateNavbar);5. 進階用 CSS 變量做主題化漸變以及一個驗證技巧做到這里基本功能已經穩(wěn)了。但實際項目里導航欄往往不止一種狀態(tài)——首頁透明、內頁實心、深色模式又要換一套顏色。如果每個狀態(tài)都寫一遍 CSS維護起來很痛苦。我的做法是用 CSS 變量把「透明態(tài)」和「實心態(tài)」抽成兩組變量切換時只換變量值。.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但視覺表現(xiàn)可以無限擴展。內頁需要默認實心就在 HTML 上直接加 .scrolled 類JS 初始化時會根據(jù)滾動位置決定是否移除邏輯自洽。驗證技巧方面我習慣用 Chrome DevTools 的 Rendering 面板打開「Paint flashing」?jié)L動頁面時看導航欄區(qū)域有沒有頻繁重繪。正常情況下只有狀態(tài)切換的那一兩幀會閃綠如果滾動全程都在閃說明有屬性在持續(xù)觸發(fā)重繪通常是 box-shadow 或 background 被寫在了會頻繁變化的元素上。另一個技巧是在 Performance 面板錄一段滾動看主線程有沒有長任務如果有超過 50ms 的任務基本就是 scroll 回調里做了重活。還有一個容易被忽略的點will-change別亂加。有人為了「優(yōu)化」給導航欄加will-change: background-color結果瀏覽器提前把它提升為合成層反而增加內存占用。只在確實觀察到掉幀、且確認是合成問題時才加加完要測。最后說個我自己的習慣。每次做完這類滾動交互我都會在真機上從頂部快速甩到底部再甩回來重復十幾次看有沒有狀態(tài)錯亂。模擬器永遠測不出 iOS 橡皮筋和安卓慣性滾動的真實表現(xiàn)。這個動作花不了一分鐘但能擋掉大部分上線后才會暴露的玄學 bug。希望幫到你。本文還有配套的精品資源點擊獲取