粘性导航栏的关键是正确使用 position: sticky，需配合 top/bottom 值、父容器非 overflow-hidden、合理 z-index 及 scroll 监听优化，并注意 ssr 兼容、移动端视口适配与层叠上下文干扰。
粘性导航栏的 CSS 属性选择
关键不是用什么框架，而是用对 position: sticky —— Tailwind 本身不提供新逻辑，只是封装了这个原生 CSS 特性。很多人误以为要靠 fixed 或 JavaScript 才能实现“吸顶”，结果导致布局塌陷或滚动错位。
正确做法是给导航容器加 sticky + top-0，同时确保其父容器有明确的高度和非 overflow: hidden（否则 sticky 会失效）：
<header class="sticky top-0 z-50 bg-white shadow-sm"><nav>...</nav></header>
-
sticky必须配合top（或bottom）值才生效，单独写sticky不起作用 - 父级若设了
overflow-x-hidden或overflow-y-hidden，sticky 元素会被裁剪或直接退化为relative -
z-50是为了压住后续内容，但若页面有 modal 或 dropdown，可能需要更高层级（如z-50不够时试z-[60]）
滚动时导航栏阴影与背景色的动态切换
纯 CSS 无法监听 scroll，所以必须用 JavaScript 控制 class 切换。Tailwind 的优势在于：你只需提前定义好两套 class，JS 只负责开关。
常见错误是把 shadow-md 和 bg-white 写死在 HTML 里，导致初始无阴影、滚动后才出现，但用户快速滚动时会看到闪烁。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 推荐在
<header></header>上预设基础样式：bg-transparent backdrop-blur-sm，再用 JS 添加bg-white shadow-sm - 监听
scroll时别用window.addEventListener('scroll', ...)频繁触发，改用requestAnimationFrame节流 - 判断滚动距离用
window.scrollY > 10，而不是=== 0—— 防止高 DPI 屏幕下因亚像素渲染导致判断失准
移动端适配中常见的高度错位问题
在 iOS Safari 或部分 Android 浏览器里，position: sticky 在 <header></header> 上表现不稳定，尤其当导航含 flex 布局 + 图标 + 文字混合时，容易出现“吸顶位置偏高”或“滚动卡顿”。
根本原因是 viewport 缩放或地址栏收起/展开改变了视口高度，而 sticky 计算依赖初始布局。
- 给
<header></header>加min-height-[var(--vh,100vh)]并配合 JS 设置--vhCSS 变量，可缓解 iOS 视口变化问题 - 避免在 sticky 容器内使用
flex-col+justify-between—— 这会让子元素高度计算异常，改用flex-row或显式h-16 - 如果导航里用了
aspect-square图标或max-w-xslogo，务必加shrink-0，否则缩放时可能被压缩变形
与 Next.js / React Server Components 的 SSR 兼容处理
服务端渲染时，window 不存在，直接调用 scrollY 会报错；更隐蔽的问题是：首次 hydration 后，导航栏状态（有无阴影）可能和客户端不一致，造成闪屏。
- JS 判断逻辑必须包裹在
if (typeof window !== 'undefined')中 - 用
useState+useEffect初始化状态，并在 effect 里同步 scroll 状态，不要依赖初始 render 时的 props - Tailwind 的
dark:变体和 sticky 无关，但若你在 dark mode 下用了dark:bg-gray-900，记得同时加dark:shadow-gray-800/20，否则吸顶后阴影会消失
最易被忽略的点：sticky 元素的兄弟节点如果用了 transform（比如 scale-95 或 rotate-2），会创建新的层叠上下文，导致 sticky 失效 —— 这类问题不会报错，只表现为“吸顶不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
