企业官网建设流程全解析

简介：自适应固定悬浮导航条HTML模板面向网页设计初学者、前端入门者及课程练习场景，针对长页面滚动时主导航容易消失、移动端布局难以兼顾的问题，给出可拆解学习的完整站点示例。页面以HTML5语义化标签组织内容，利用CSS的fixed定位、top与left偏移和媒体查询完成顶部悬浮及多屏适配，再通过JavaScript实现鼠标悬停反馈、下拉菜单、滚动固定与入场动画，帮助读者理解结构、样式和交互之间的配合关系。

压缩包共72个文件，约3.8MB，内含3个HTML页面、9个CSS样式表、22个JavaScript脚本，以及jpg、png图片和woff、ttf、eot等字体图标素材；页面、样式、脚本与资源分层清晰，方便按模块定位固定导航的实现位置。已有556人浏览学习。

除核心导航外，示例还覆盖轮播、视差滚动、数字计数、图片过滤和动画加载等常见效果，读者可从中梳理响应式导航的定位逻辑、断点写法与事件绑定流程，并据此改造成个人主页、作品集或课程作业的页面框架，积累可复用的前端练习素材。

1. 滚动到第三屏，导航还在——一份能直接用的自适应固定悬浮导航条

做企业站和活动页时，最常被反复改的组件不是轮播，而是顶部那条导航：往下滚的时候它要粘住、屏幕变窄的时候它要折叠、切到手机上它要能点开。这份自适应固定悬浮导航条 HTML 网站源码模板，解决的就是这件“看着简单、交接出去就出问题”的事——纯 HTML5 + CSS + 原生 JavaScript，不依赖任何框架，解压后用浏览器就能看到效果，也能直接接入现有的静态站或后台模板。

适合两类人：一类是把现成页面改成自己品牌的新手，只需改 Logo、链接和几处颜色变量；另一类是要把导航条抽成公共组件、复用到多套页面里的熟手，源码里三层拆分（结构、样式、行为）和断点策略都留了改动空间。下面按“项目结构 → 跑起来 → 代码怎么写的 → 常踩的坑 → 怎么改造成自己的组件”推进。

2. 结构解剖：固定悬浮导航条的三层拆分与自适应断点设计

一套能长期维护的导航条，不会把结构、样式、行为混在一起。这份源码的组织方式是按职责切三块：HTML 只负责语义和可访问性，CSS 只负责布局与状态外观，JS 只负责滚动、收缩、抽屉开合这类状态机。三层之间通过 class 名和 CSS 自定义属性通信，互相不直接读写对方的内部结构，后面改皮肤或者换成别的交互方式，都不至于推倒重来。

2.1 HTML 骨架：语义化 nav 里的三段式结构

导航条内部我习惯切成左中右三段：品牌区、链接区、折叠按钮。品牌区和链接区在桌面端并排，折叠按钮在移动端才出现。这个三段式是所有自适应导航条的最小可用结构，多一段少一段都会在某个断点上出现挤在一起的尴尬。

<!-- 固定导航条：header 承载吸顶与背景，nav 承载语义与布局 --> <header class="site-header" id="siteHeader"> <nav class="nav" aria-label="主导航"> <!-- 左：品牌区，点击回顶部 --> <a class="nav__logo" href="#top"> <span class="nav__logo-mark" aria-hidden="true">N</span> <span class="nav__logo-text">某某工作台</span> </a> <!-- 中：链接区，桌面横排，移动端变成抽屉 --> <ul class="nav__list" id="navList"> <li><a class="nav__link is-active" href="#hero">首页</a></li> <li><a class="nav__link" href="#feature">能力</a></li> <li><a class="nav__link" href="#case">案例</a></li> <li><a class="nav__link" href="#pricing">价格</a></li> <li><a class="nav__link" href="#contact">联系</a></li> </ul> <!-- 右：折叠按钮，aria-expanded 是给读屏器和 JS 共用的状态位 --> <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navList" aria-label="展开菜单"> <span class="nav__toggle-bar"></span> <span class="nav__toggle-bar"></span> <span class="nav__toggle-bar"></span> </button> </nav> </header> <!-- 占位元素：把被 fixed 导航压住的那段高度还回去 --> <div class="nav-spacer" aria-hidden="true"></div>

这里有几个容易被忽略的细节。aria-expanded不只是一个无障碍属性，它同时是 JS 和 CSS 都能读的单一状态源——按钮开没开，只看这一个值，不再另外维护一个is-open布尔变量，状态就不会打架。aria-controls把按钮和被控制的列表绑定起来，读屏器点按钮时知道展开的是哪一块。aria-label在折叠状态下给出“展开菜单”，展开后由 JS 改成“收起菜单”。

nav-spacer这个空 div 是整套方案的关键。因为position: fixed的元素脱离文档流，紧跟着的内容会被顶到页面最上面、被导航条盖住。用一个高度等于导航条常态高度的占位元素把这段空间占回来，是最稳的做法，比给body加padding-top更好维护——占位元素跟着结构走，改版时不容易忘。

提示：占位元素的高度只用常态高度，不要跟着导航条收缩后的高度一起变。它一旦跟着变，整个页面就会在滚动时上下跳，这是最初级也最常见的错误。

2.2 CSS 变量与断点：自适应的三道关卡

样式层的第一件事是把所有会改的值收进:root。导航条这种东西，客户改一次品牌色、产品改一次高度，都要动 CSS，把散落各处的 72px、14px、#2563eb 收成变量，后面改一次就够。

/* 设计变量集中管理，改一处全站生效 */ :root{ --nav-h: 72px; /* 常态高度 */ --nav-h-min: 56px; /* 滚动收缩后的高度 */ --nav-bg: rgba(255,255,255,.72); --nav-blur: 14px; /* 毛玻璃模糊半径 */ --nav-line: rgba(17,24,39,.08); --nav-text: #1f2937; --nav-accent: #2563eb; --nav-z: 1000; /* 层级单独控，避免和其他弹层抢 */ --nav-ease: cubic-bezier(.4,0,.2,1); } /* 固定定位：inset 简写替代 top/right/bottom/left 四行 */ .site-header{ position: fixed; inset: 0 0 auto 0; z-index: var(--nav-z); height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px); /* 刘海屏安全区 */ background: var(--nav-bg); border-bottom: 1px solid transparent; transition: height .28s var(--nav-ease), box-shadow .28s var(--nav-ease), border-color .28s var(--nav-ease); } /* 毛玻璃按能力降级：不支持就退回半透明纯色，不硬撑 */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){ .site-header{ -webkit-backdrop-filter: blur(var(--nav-blur)); backdrop-filter: blur(var(--nav-blur)); } } /* 吸顶态：由 JS 加 class 触发，高度收缩 + 投影出现 */ .site-header.is-stuck{ height: var(--nav-h-min); border-bottom-color: var(--nav-line); box-shadow: 0 2px 14px rgba(17,24,39,.08); } /* 内容区顶部留白，与占位元素配合 */ .nav-spacer{ height: var(--nav-h); }

自适应的“三道关卡”指的是三个不同性质的断点，不是一个max-width: 768px打天下。第一道是内容溢出关：链接文案变长、语言切换后单词变长，横向排不下时就要收字号或减间距，通常落在 1024px 附近。第二道是交互切换关：横排链接变成汉堡抽屉，这个断点取决于链接数量，五到七个链接一般定在 768～900px 之间。第三道是指针类型关：用@media (hover: none)区分触屏，把 hover 才出现的效果换成常驻效果，避免手机上点了没反应。

/* 第一关：中等屏幕，压缩间距而非直接折叠 */ @media (max-width: 1024px){ .nav__list{ gap: 18px; } .nav__link{ font-size: 14px; } } /* 第二关：切换为抽屉式导航 */ @media (max-width: 768px){ .nav__list{ position: fixed; inset: var(--nav-h) 0 auto 0; /* 贴在导航条下方 */ flex-direction: column; padding: 12px 20px 20px; background: #fff; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .2s var(--nav-ease), transform .2s var(--nav-ease), visibility .2s; } .menu-open .nav__list{ transform: translateY(0); opacity: 1; visibility: visible; } .nav__toggle{ display: inline-flex; } } /* 第三关：无 hover 能力的设备，效果常驻 */ @media (hover: none){ .nav__link::after{ transform: scaleX(1); opacity: .35; } }

这里用visibility而不是只用opacity: 0隐藏抽屉，是因为opacity为 0 的元素仍然在可聚焦序列里，键盘 Tab 会跑进一个看不见的菜单；visibility: hidden会把整棵子树从键盘焦点里摘出去。transform做位移、opacity做淡入，两者都是合成层属性，动画不会触发重排，抽屉滑出时页面不会跟着抖。

2.3 行为层：滚动状态机与滚动监听

JS 只做四件事：滚动时判断要不要进入吸顶态、移动端下滑隐藏上滑显示、抽屉开关、当前区块高亮。四件事共用一次滚动回调，避免挂三四个scroll监听互相抢。

// nav.js —— 所有状态都由 DOM 上的 class 表达，JS 不直接写行内样式 const header = document.getElementById('siteHeader'); const toggle = document.getElementById('navToggle'); const list = document.getElementById('navList'); let lastY = window.scrollY; let ticking = false; // 帧锁：一帧最多算一次 function syncHeader(){ const y = window.scrollY; // 1) 吸顶态：滚动超过 8px 就收缩，留一点容差避免抖动 header.classList.toggle('is-stuck', y > 8); // 2) 移动端下滑隐藏、上滑显示；抽屉打开时禁止隐藏 const isMobile = window.matchMedia('(max-width: 768px)').matches; const menuOpen = document.body.classList.contains('menu-open'); const hide = isMobile && !menuOpen && y > lastY && y > 120; header.classList.toggle('is-hidden', hide); lastY = y; ticking = false; } window.addEventListener('scroll', () => { if (ticking) return; // 本帧已经排过队，直接丢 ticking = true; requestAnimationFrame(syncHeader); }, { passive: true }); // passive 告诉浏览器不会 preventDefault

ticking这个帧锁是必写的。滚轮一秒钟能触发几十上百次scroll，回调里只要有一次读scrollY加写 class，就是一次“读写交错”，浏览器被迫同步计算布局，低端机上滑起来就像 PPT。用requestAnimationFrame把计算压到每帧一次，多余的事件直接丢弃，这招在任何滚动特效里都通用。

{ passive: true }同样关键。浏览器默认不知道你的回调会不会调用preventDefault，只能等回调执行完才敢滚动页面，加上 passive 就直接放行，滚动跟手程度差得很明显。

滚动高亮用IntersectionObserver而不是在scroll里算每个区块的offsetTop。后者每帧要读 N 个元素的几何信息，区块一多就是灾难。

// 区块高亮：用一条"判定带"命中当前区块，而不是算距离 const links = Array.from(document.querySelectorAll('.nav__link')); const linkMap = new Map(); links.forEach(a => { const id = a.getAttribute('href'); if (!id || !id.startsWith('#')) return; const section = document.querySelector(id); if (section) linkMap.set(section, a); }); const io = new IntersectionObserver(entries => { entries.forEach(entry => { if (!entry.isIntersecting) return; links.forEach(a => a.classList.remove('is-active')); const active = linkMap.get(entry.target); if (active) active.classList.add('is-active'); }); }, { // 上边留 45%、下边留 50%，在视口中线附近形成一条窄判定带 rootMargin: '-45% 0px -50% 0px', threshold: 0 }); linkMap.forEach((_, section) => io.observe(section));

rootMargin: '-45% 0px -50% 0px'的意思是：把观察区域的上边界往下压 45%、下边界往上抬 50%，只剩视口中线附近一条窄带。哪个区块进入这条带，哪个链接就高亮。这样算出来的“当前区块”和人的直觉一致——不是“刚露头就算”，也不是“占满屏幕才算”。如果直接把threshold调成 0.5，长区块永远到不了 50% 可见，高亮就会卡死不动，这是很多模板的通病。

3. 跑起来：本地预览、目录结构与最小改动清单

拿到一份静态模板，最怕的是双击index.html打开发现样式没加载、字体 404、按钮点了没反应。这类问题九成不是代码写错，而是用file://协议打开的。下面按“起服务 → 认目录 → 改内容”的顺序走一遍。

3.1 目录结构与本地起服务

这类导航条模板的目录组织大同小异，核心是把通用样式和导航专用样式分开，方便你只替换其中一部分：

fixed-nav-template/ ├── index.html # 主页面，导航条结构在这里 ├── about.html # 二级页，复用同一套导航 ├── assets/ │ ├── css/ │ │ ├── reset.css # 基础重置，改主题时基本不动 │ │ └── nav.css # 导航条全部样式，改动集中在这 │ ├── js/ │ │ └── nav.js # 滚动、抽屉、高亮逻辑 │ └── img/ │ └── logo.svg └── README.md # 参数说明与改动点清单

起本地服务最省事的办法是用 Python 自带的 http.server，不用装任何东西：

# 在项目根目录执行，端口随便挑一个没被占用的 python -m http.server 5173 # 然后浏览器访问 http://localhost:5173 # 如果 python 不可用，用 node 的话等价于： npx serve . -l 5173

为什么非要起服务？两个原因。一是file://下相对路径的解析规则和http://有差异，assets/css/nav.css这种路径偶尔会失效。二是后面你可能会把导航逻辑改成 ES Module（import/export），模块加载在file://下会被浏览器的同源策略直接拦掉，控制台报一个CORS policy的错，新手很容易误以为是代码问题。

想验证自适应效果，别用鼠标拖窗口。拖窗口只改宽度，不改设备像素比和触屏能力，@media (hover: none)那一档根本触发不了。正确做法是打开开发者工具的设备模拟，挑一个 375×667 的小屏设备，切到触屏模拟，同时把窗口拉到 900px 左右看抽屉断点有没有提前或延后触发。

注意：改完nav.css一定要强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R）。浏览器对 CSS 的缓存很积极，改完看不到效果先怀疑缓存，别急着改代码。

3.2 把品牌信息换掉：最小改动清单

从模板变成“自己的站”，改动量其实很小，按依赖顺序做四步就够。

第一步，换品牌区。index.html里.nav__logo-mark是文字 logo，换成<img src="assets/img/logo.svg" alt="品牌名">即可；.nav__logo-text直接改文字。注意alt要写，SVG logo 里如果已经包含文字，alt可以留空但属性不能省。

第二步，换导航项。<ul class="nav__list">里的五个<li>对应五条链接，href指向页面锚点或独立页面都行。这里要同步一件事：如果新增了链接，nav.js里的linkMap是靠href以#开头自动收集的，不用改；但如果链接指向独立页面（比如about.html），滚动高亮会自动跳过它，这是预期行为。

第三步，换配色。只改:root里的三行：

:root{ --nav-bg: rgba(17,24,39,.78); /* 深色导航 */ --nav-text: #f9fafb; --nav-accent: #22d3ee; /* 高亮色 */ }

深色背景配backdrop-filter时要注意，rgba的透明度别低于 0.6，否则滚动到浅色内容上会糊成一片，文字看不清。

第四步，调高度。--nav-h和--nav-h-min是一对，改的时候两个一起改，且--nav-h-min要比--nav-h小 12～20px，差值太小看不出收缩效果，太大又会让 logo 在动画中途跳一下。

3.3 参数速查表：改哪一行出什么效果

改模板最耗时间的不是写代码，是找“这个效果到底在哪一行”。下面这张表是我自己用这份模板时记下来的对照，改之前先看一眼能省不少翻文件的时间。

表格里“抽屉断点三处一起改”这条是血泪经验。断点在 CSS 里出现两次（.nav__list的抽屉样式、.nav__toggle的显示），在 JS 里出现一次（matchMedia的判断）。只改 CSS 不改 JS，会出现“桌面宽度下导航条被隐藏了但按钮没出来”的鬼状态——用户既看不到菜单，也点不开菜单。

4. 核心逻辑拆解：吸顶判定、占位补偿与移动端抽屉

前面讲的是“长什么样”，这一章讲“为什么这么写”。三个模块：滚动状态机、占位补偿、抽屉的开合与滚动锁。这三块写扎实了，导航条基本不会再出问题。

4.1 吸顶判定与收缩动画的 JS 实现

吸顶有两种实现路线，position: sticky和position: fixed。这份模板选 fixed，原因是 sticky 的表现依赖父容器的overflow和高度，父级只要有一个overflow: hidden（做横向滚动裁切时很常见），sticky 立刻失效，而且失效时没有任何报错，纯靠肉眼发现。fixed 没有这个隐患，代价是要自己补占位元素。

状态判定不要写成多个独立的if，容易漏掉互斥关系。比如“抽屉打开时不能隐藏导航条”这条，如果写成两个独立判断，滚动事件和点击事件竞争时就会出现导航条在菜单展开状态下被滑走的诡异画面。上面syncHeader里的写法是把三个条件串成一条布尔表达式，天然互斥。

收缩动画为什么用height而不是transform: scaleY()？因为scaleY会把内部文字一起压扁，logo 和链接文字会变形，除非你对每个子元素再做反向缩放，成本更高。height的过渡虽然会触发重排，但导航条内部元素很少，实测在千元机上也是流畅的。真正要避免的是在scroll里直接改height的数值（比如header.style.height = y > 8 ? '56px' : '72px'），那样每一帧都在写行内样式，无法走 CSS 过渡，还会不断触发样式重算。加 class 让 CSS 去过渡，是唯一正确的姿势。

还有一个细节：will-change: height我一般不加。will-change用错了反而更慢，它会让浏览器提前为这个元素提升合成层并长期占用内存。导航条这种只有一个元素、动画只有 280ms 的场景，加了纯属浪费。

4.2 占位补偿：为什么你的首屏总是抖一下

页面抖动的根因通常不是动画，是读写交错。经典错误写法长这样：

// 反例：每帧读一次布局，再写一次样式，强制同步布局 window.addEventListener('scroll', () => { const h = header.offsetHeight; // 读：触发重排 document.body.style.paddingTop = h + 'px'; // 写：触发重排 });

offsetHeight是布局属性，读它之前浏览器必须把挂起的样式变更全部结算完，才能给出准确值。上面这段代码在一帧内制造了“读 → 写 → 下一帧再读”的循环，帧率直接掉一半。而且它还有个逻辑错误：导航条收缩后offsetHeight变小，paddingTop跟着变小，内容整体上移，视觉上就是页面在滚动时“跳”了一下。

正确做法是把读取和写入彻底分开，读只发生在尺寸真正变化时：

// 正解：ResizeObserver 只在尺寸变化时读一次，写入用 CSS 变量 const spacer = document.querySelector('.nav-spacer'); const ro = new ResizeObserver(entries => { // 只读一次常态高度（用未收缩状态的基准值），写进 CSS 变量 const h = header.getBoundingClientRect().height; // 收缩态不更新占位，避免内容跟着上移 if (!header.classList.contains('is-stuck')) { document.documentElement.style.setProperty('--nav-real-h', h + 'px'); } }); ro.observe(header);

/* 占位高度用变量，默认回退到设计值，JS 没跑也不塌 */ .nav-spacer{ height: var(--nav-real-h, var(--nav-h)); }

ResizeObserver的好处是它由浏览器在布局阶段统一回调，不会像scroll那样每帧触发，也不会造成读写循环。var(--nav-real-h, var(--nav-h))这个回退值很重要：JS 加载失败或被 CSP 拦掉时，占位元素仍然有 72px 的高度，页面不会塌成一片。

锚点跳转被导航条遮住是另一个高频问题。点“价格”跳过去，标题正好藏在那条 72px 的导航下面。不用写 JS 算偏移，一行 CSS 就够：

/* 所有带 id 的锚点目标，滚动时预留导航条高度 + 12px 呼吸空间 */ [id]{ scroll-margin-top: calc(var(--nav-h) + 12px); } /* 平滑滚动，同时尊重系统的"减少动态效果"设置 */ html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

scroll-margin-top是浏览器原生支持的锚点偏移方案，比早年那种“拦截点击 → 算offsetTop→window.scrollTo”的写法干净得多，而且它同时作用于页内跳转、浏览器前进后退恢复位置、以及 URL 里带 hash 直接打开的场景。那些 JS 方案通常只覆盖了第一种。

4.3 移动端抽屉：开关、滚动锁与焦点回收

抽屉最容易被做坏的地方不是动画，是滚动穿透。菜单展开后手指在遮罩上继续滑，底下的页面跟着滚，关掉菜单时页面已经跑到别的位置了。overflow: hidden在 iOS Safari 上不完全管用，比较稳的是 position 固定法：

// 抽屉开关 + 滚动锁：iOS 上 overflow:hidden 兜不住，用 fixed 定位锁 let lockedY = 0; function lockScroll(){ lockedY = window.scrollY; document.body.style.position = 'fixed'; document.body.style.top = `-${lockedY}px`; document.body.style.width = '100%'; } function unlockScroll(){ document.body.style.position = ''; document.body.style.top = ''; document.body.style.width = ''; window.scrollTo(0, lockedY); // 恢复原来的位置，别回到顶部 } function setMenu(open){ toggle.setAttribute('aria-expanded', String(open)); toggle.setAttribute('aria-label', open ? '收起菜单' : '展开菜单'); document.body.classList.toggle('menu-open', open); open ? lockScroll() : unlockScroll(); if (open){ // 打开后把焦点送到第一个链接，键盘用户不用再 Tab 一遍 list.querySelector('.nav__link')?.focus({ preventScroll: true }); } else { toggle.focus({ preventScroll: true }); // 关闭后焦点回到按钮 } } toggle.addEventListener('click', () => { setMenu(toggle.getAttribute('aria-expanded') !== 'true'); }); // Esc 关闭，桌面端按 Esc 是肌肉记忆 document.addEventListener('keydown', e => { if (e.key === 'Escape' && document.body.classList.contains('menu-open')) setMenu(false); }); // 点击抽屉内的链接后自动收起，否则跳到锚点后菜单还挡着 list.addEventListener('click', e => { if (e.target.closest('.nav__link')) setMenu(false); });

preventScroll: true这个参数别省。不加的话，focus()会顺带把元素滚进视口，而这时候页面正处于position: fixed锁定状态，滚动位置会被改掉，解锁时就跳回了一个错误的位置。这类问题在真机上偶发、在模拟器上复现不了，非常折磨人。

window.scrollTo(0, lockedY)放在解锁的最后一步，顺序不能反。如果先滚动再恢复position，body还在固定状态，scrollTo会被忽略。

5. 排查手册：固定导航条最容易翻车的五个点

下面这五条基本覆盖了这类模板九成的现场问题。每条按“看到什么现象 → 为什么会这样 → 怎么改”来写，遇到问题时按现象对号入座就行。

5.1 布局类翻车：遮挡、抖动与横向滚动条

现象一：首屏内容被导航条压住，logo 只露出下半截。原因是position: fixed让导航条脱离了文档流，后面的内容从页面顶端 y=0 开始排，正好被盖住。有人会给body加padding-top: 72px应付过去，但只要导航条高度在某个断点变了（比如移动端调成 60px），这个写死的 72 就会露馅。解决方式是老老实实用占位元素.nav-spacer加height: var(--nav-real-h, var(--nav-h))，高度跟着变量走，断点改了自动跟随。

现象二：页面滚动时内容上下抖，像在抽搐。八成是在滚动回调里读了offsetHeight又写了style，制造了读写交错；也可能是占位元素的高度跟着导航条的收缩态一起变。前者改用ResizeObserver，后者把“更新占位高度”的逻辑限制在非收缩状态，两个坑我都踩过。

现象三：手机横屏时页面能左右拖动，右边露出一条白。抽屉的 CSS 里用了inset: var(--nav-h) 0 auto 0，left/right都是 0，正常情况下不会超宽。真凶往往是某个链接文字太长撑破了容器，或者给抽屉加了width: 100vw而页面存在竖向滚动条——100vw包含滚动条宽度，100%不包含。把100vw换成100%，再给body加overflow-x: hidden兜底。

5.2 行为类翻车：高亮卡死与状态打架

现象四：滚动到某些区块时，导航高亮不动或者来回闪。两种原因。一是IntersectionObserver的threshold设成了 0.5 这类大值，而某个区块本身比视口还高，永远达不到 50% 可见，回调不触发，高亮就卡在上一个。改用rootMargin: '-45% 0px -50% 0px'配threshold: 0，用一条窄带判定。二是多个区块的判定带重叠，两个条目在同一帧都isIntersecting，后执行的那个把前面的覆盖掉，视觉上就是闪。可以在回调里对所有条目排序，取boundingClientRect.top最接近视口中线的那个。

现象五：手机上下滑时导航条反复闪现，或者菜单开着导航条自己没了。y > lastY这个判断在极小幅滚动（惯性滚动末尾、回弹）时方向会快速变化，阈值设成 120 太小就会抖。把触发阈值提到 160～200，再加个“连续两次同方向才切换”的防抖，就稳了。菜单开着导航条消失的问题，是因为syncHeader里没检查menu-open，补上!menuOpen这个条件即可——这也是把多个条件写成一条布尔表达式的好处，漏了哪个一眼能看出来。

提示：真机上排查这类问题，别只看视觉效果。在syncHeader里临时打一行console.log(y, hide)，连上手机看日志，比盯着屏幕猜快十倍。

6. 二次开发：把导航条抽成可复用组件

改到第三套页面的时候，我一般就不再复制粘贴 HTML 了。这个模板的导航条结构稳定、状态都由 class 表达，非常适合抽成一个几十行的“无框架组件”，用一小段 JS 渲染 + 事件委托就能复用。

思路是把链接数据抽成数组，渲染函数负责生成 DOM，剩下的滚动逻辑完全不动：

// nav-widget.js —— 数据驱动渲染，滚动逻辑复用上一章的 syncHeader export function mountNav({ el, logo, items, activeHref }) { const html = items.map(it => ` <li> <a class="nav__link${it.href === activeHref ? ' is-active' : ''}" href="${it.href}">${it.label}</a> </li>`).join(''); el.innerHTML = ` <nav class="nav" aria-label="主导航"> <a class="nav__logo" href="#top"> <img src="${logo.src}" alt="${logo.alt}" height="28"> </a> <ul class="nav__list" id="navList">${html}</ul> <button class="nav__toggle" type="button" aria-expanded="false" aria-controls="navList" aria-label="展开菜单"> <span class="nav__toggle-bar"></span> <span class="nav__toggle-bar"></span> <span class="nav__toggle-bar"></span> </button> </nav>`; return el.querySelector('.nav'); }

activeHref用参数传进来，而不是让组件自己在滚动时抢着写is-active——多页面场景下，“当前在哪一页”是服务端或路由层知道的事，滚动高亮只负责页内锚点。这两件事混在一起，就会出现“从首页跳到 about.html 后，首页那条链接还亮着”的问题。

参数化之后，改造的边界就很清楚了：换主题改:root变量，换结构改mountNav的模板字符串，换交互改syncHeader里的三条判定。三者互不影响，测试也简单——把items塞 12 条进去看断点会不会提前，把items塞 2 条看横排会不会太空，这两种极端数据比逐个手点页面更容易发现问题。

验证方式我固定用三个动作：一是设备模拟里从 1440px 一路拖到 320px，看抽屉断点切换时有没有“两边都没有菜单”的空档；二是把系统字体放大到 200%，看导航条高度够不够、文字会不会被裁；三是断开网络（模拟 JS 加载失败），确认占位元素高度、抽屉的初始隐藏状态都还正常——.nav__list在移动端默认是visibility: hidden的，如果 JS 没跑起来而按钮又显示着，菜单就永远打不开了，这种情况我的处理是给html加个no-js类，JS 执行后立刻移除，CSS 里针对.no-js让抽屉保持展开、按钮隐藏，这样最差情况下导航还是能用的。

从那以后我每次交付静态站，都会在交付前强制走一遍上面这三个动作，尤其是断网那一步——它揪出过两次“JS 一挂导航就废”的问题，而这类问题在客户那边的网络环境下出现概率并不低。希望帮到你。

本文还有配套的精品资源，点击获取