sticky导航未贴满视口是因为width:100%依赖父容器宽度，而父容器存在padding、margin或box-sizing非border-box等问题；应改用left:0;right:0强制拉伸，并避免transform、overflow:hidden等干扰。
sticky 导航用 width: 100% 为什么没贴满？
因为 position: sticky 的“粘性”行为依赖于父容器的尺寸和滚动上下文，width: 100% 只会继承父元素的 width，而父元素很可能有 padding、margin 或默认浏览器边距，也可能没设 box-sizing: border-box，导致实际宽度不足视口。
- 检查父容器是否设置了
padding-left/padding-right，尤其常见于.container类布局容器 - 确保导航自身或其直接父元素设置了
box-sizing: border-box，否则padding和border会撑出宽度 - 避免把
sticky元素放在overflow: hidden或transform非 none 的祖先内——这会创建新的层叠上下文并截断粘性行为
如何让 sticky 导航真正“撑满视口宽度”？
关键不是靠 width: 100% 继承，而是用 left: 0; right: 0; 强制拉伸，再配合 top 定位。这样它不再依赖父宽，而是锚定在包含块（通常是视口）的左右边缘。
- 给导航加
position: sticky; top: 0; left: 0; right: 0; - 移除所有可能干扰的
width、max-width或margin: auto - 如果导航内部有居中内容（如 logo + nav items），用
margin: 0 auto或display: flex; justify-content: center控制，而不是给整个导航设width: 1200px
.nav {
position: sticky;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 100;
}
移动端下 sticky 不生效？先查这三个限制
iOS Safari 和部分安卓 WebView 对 position: sticky 支持较晚，且有隐性约束：必须有明确的滚动容器、不能被 transform 干扰、父级不能是 flex 或 grid 的子项（除非显式设 align-items: start）。
- 在 iOS 上，确保滚动容器是
或显式设置了overflow-y: scroll的元素；上的overflow不触发 sticky - 避免给 sticky 元素或其任意祖先添加
transform: translateZ(0)或scale(1)—— 这会创建新层叠上下文并禁用 sticky - 若导航在
display: flex的 header 内，给该 header 加align-items: flex-start，否则 sticky 可能被“居中对齐”逻辑压制
要不要加 will-change: transform 提升 sticky 性能？
没必要，反而可能引发渲染异常。sticky 本身已由浏览器优化，will-change 在这里既不提升响应速度，还可能导致 iOS 下闪烁或定位偏移。
立即学习“前端免费学习笔记（深入）”；
-
will-change: transform会让浏览器提前为元素分配独立图层，但 sticky 的位置计算是动态重排的，图层化反而增加合成开销 - 真有卡顿，优先检查是否绑定了高频
scroll事件监听器，或导航内部有大量重绘（比如未优化的 SVG 图标或 inline style 变更） - 如需平滑过渡，用
transition: top 0.2s ease而非强制图层提升
width，left/right 才是真正控制横向锚点的开关；而兼容性陷阱往往藏在看不见的祖先样式里。 
