商品详情页头部导航须独立设计、精简聚焦，仅保留返回按钮、轻量品牌标识和购物车入口，删除搜索、用户入口等冗余元素，并采用 position: sticky 实现稳定吸顶。
商品详情页的头部导航不该复用首页通用 header，必须独立设计、精简聚焦。 用户点进详情页时，注意力全在商品上，顶部塞满 logo、搜索、购物车、用户入口，只会干扰决策路径，还拖慢首屏渲染。
为什么不能直接套用首页 <header></header>？
首页 header 是为「逛」服务的，详情页 header 是为「买」服务的——目标完全不同。直接复用会导致三个实际问题：
- DOM 节点冗余：比如“全部分类”“促销活动”这类入口，在详情页毫无意义，却仍参与 CSS 计算和 JS 初始化
- 资源加载浪费：首页 header 常带搜索建议 JS、用户登录态轮询、购物车徽章实时更新逻辑，详情页根本用不上
- 视觉权重失衡：logo 和购物车图标尺寸/颜色和首页一致，但详情页里它们抢了价格和“加入购物车”按钮的焦点
<header></header> 里该留什么、删什么？
只保留三类必要元素：返回控制、轻量品牌标识、核心操作入口。其他一律剥离：
- ✅ 必须有：
<button type="button" aria-label="返回"></button>（用 history.back() 或 router.back()） - ✅ 可选但推荐：
<h2 class="brand-title">Apple</h2>（仅品牌名，不加 slogan；用<h2></h2>语义正确，且比<h1></h1>避免与商品标题冲突） - ✅ 必须有：
<button type="button" data-action="cart">购物车</button>（带data-action便于 JS 统一监听，不依赖 class 名） - ❌ 删掉：搜索框（详情页不需要再搜）、用户头像/登录入口（详情页转化链路中不需跳转登录）、二级导航栏（如“手机”“配件”）
移动端返回按钮怎么避免误触？
原生 history.back() 在微信 WebView 或某些安卓浏览器里可能触发页面白屏或跳转异常，尤其当详情页由小程序跳转而来时。不能只靠一个 <button></button> 就完事：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 返回按钮必须设
tabindex="0"，确保键盘可聚焦，满足无障碍要求 - 点击事件要加防抖：连续快速点两次，第二次应忽略，避免重复 popState
- 优先用
window.location.href = document.referrer回退，比history.back()更稳定；若referrer为空（如从桌面快捷方式打开），再 fallback 到跳转首页 - 按钮图标用 SVG 内联，别用 iconfont，避免字体加载延迟导致空白或错位
如何让 header 在滚动时保持吸顶但不遮挡内容？
用 position: sticky 最轻量，但必须配合两个关键约束，否则在 iOS Safari 或低端安卓机上会失效或跳动：
- 父容器不能有
overflow: hidden或transform（比如外层用了transform: translateZ(0)做硬件加速，就会让 sticky 失效） - sticky 元素自身必须设
top: 0，且不能同时设margin-top（会破坏粘性定位计算） - 为防止吸顶后遮住商品主图顶部，给主图区域加
padding-top等于 header 高度，并设box-sizing: border-box - 慎用
contain: layout style paint包裹 header —— 它虽能提升滚动性能，但某些 Android UC 浏览器下会导致 sticky 行为异常
细节决定转化率：header 不是装饰，是用户进入详情页后的第一个交互锚点。少一个无用入口，就少一次注意力分流；稳一帧滚动表现，就多一分下单信任。这些地方改起来小，漏掉却最容易被 A/B 测试数据打脸。
