粘性导航栏需结构+类+少量JS协同实现，纯sticky类易因父容器overflow/transform、缺失top值等失效；需z-50防遮挡、backdrop-blur-sm增强视觉，滚动变色须JS监听scroll并节流处理。
粘性导航栏（position: sticky）在 Tailwind 中能直接实现，但真正在滚动时“稳住不跳动、不遮挡内容、不破坏可访问性”，得靠结构+类+少量 JS 协同。纯用 sticky 类往往不够。
为什么 sticky 类单独用会失效
Tailwind 的 sticky 对应 position: sticky，但它生效的前提是：父容器不能有 overflow: hidden 或 transform 等触发新层叠上下文的属性；且必须设置 top 值（比如 top-0）。常见失效场景：
- 把
sticky top-0加在<nav></nav>上，但它的父级<div class="overflow-hidden"> 拦住了定位行为 <li>用了 <code>transform: scale(1)或will-change: opacity—— 这些会让浏览器创建新的 stacking context，sticky失效 - 没写
top值，只写sticky，CSS 不识别 -
sticky top-0：让元素随滚动锚定在顶部 -
z-50：确保它盖在后续内容之上（z-10在某些布局里会被 hero 区域或 banner 盖住） -
backdrop-blur-sm（可选）：配合半透明背景时，避免文字被下方内容干扰；但注意 iOS Safari 旧版本不支持，需降级为bg-white/90
sticky + z-50 + backdrop-blur 的组合逻辑
视觉上“悬浮”需要三层保障：
示例结构：
立即学习“前端免费学习笔记（深入）”；
<nav class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b">
<div class="container mx-auto px-4 py-3">
<div class="flex items-center justify-between">
<span>Logo</span>
<ul class="hidden md:flex space-x-6">...</ul>
</div>
</div>
</nav>
滚动时动态切换背景色，必须用 JS 监听 scroll
Tailwind 没有内置滚动状态类，isSticky 这种变量只能靠 JS 控制。关键点：
- 监听
window.addEventListener('scroll')，而非document.scrollingElement（后者在部分安卓 WebView 下不可靠） - 判断依据用
window.scrollY > 10，而不是scrollTop > 0（避免首屏轻微滚动就触发） - 别在每次 scroll 回调里直接操作 class，改用
requestAnimationFrame节流 - 记得在组件卸载时移除监听（Vue 的
onBeforeUnmount，React 的useEffect cleanup）
简短逻辑示意（Vue3 setup）：
const isSticky = ref(false)
onMounted(() => {
const onScroll = () => {
requestAnimationFrame(() => {
isSticky.value = window.scrollY > 10
})
}
window.addEventListener('scroll', onScroll)
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
})
移动端汉堡菜单与 sticky 共存的坑
当导航栏在移动端折叠为汉堡菜单时，sticky 容易和弹出菜单打架——菜单展开后高度突增，sticky 元素可能被撑开或错位。根本解法是：
- 汉堡菜单的
<nav></nav>必须和触发按钮同级，且都包裹在同一个relative容器里 - 不要给弹出菜单加
fixed或absolute，改用max-h-0 overflow-hidden+peer-checked:max-h-96（依赖隐藏 checkbox） - 如果用了 JS 控制菜单显隐，确保
sticky导航栏的z-index高于菜单，否则菜单会被盖住
最易忽略的是：iOS Safari 在 overflow-y: auto 容器内滚动时，sticky 可能完全不响应。此时只能退回到 position: fixed + 手动计算 top 值。
