吸顶导航栏（Sticky Navigation Bar）是指在用户向下滚动页面时，导航栏自动固定在视口顶部，始终保持可见。其优势包括：
✅ 提升用户体验：用户无需回滚即可访问导航，减少操作摩擦；
✅ 提高转化率：关键导航入口始终可见，增加点击概率；
✅ 降低跳出率：长页面中用户可随时切换内容，减少流失；
✅ 实现简单：现代浏览器仅需一行CSS position: sticky; top: 0; 即可实现。

position: sticky（推荐）：
• 元素在滚动到指定位置时"粘住"，但仍在文档流中占据空间；
• 不需要额外处理内容偏移，不会遮挡下方内容；
• 纯CSS实现，性能好，无需JavaScript；
• 相对于最近的滚动祖先定位。

position: fixed：
• 元素脱离文档流，始终固定在视口的指定位置；
• 需要手动给body添加padding-top补偿高度；
• 通常需要JavaScript监听滚动来动态切换；
• 适合需要在滚动到特定位置后才固定的场景。

sticky不生效的常见原因：
🔴 父容器设置了overflow: hidden：这是最常见的问题。sticky元素需要相对于滚动容器定位，如果父级overflow为hidden，sticky会失效；
🔴 未设置top值：必须指定top: 0;（或其他值），否则浏览器不知道粘在哪里；
🔴 父容器高度不足：sticky元素只能在父容器范围内粘住，如果父容器高度与sticky元素相同，则无滚动空间；
🔴 z-index被覆盖：确保sticky元素的z-index足够高，不被其他元素遮挡。

使用 scroll-padding-top 是最优雅的解决方案：
html { scroll-padding-top: 60px; } /* 值等于导航栏高度 */
这样锚点跳转时会自动偏移，内容不会被导航栏遮挡。

其他方案：
• 给body添加 padding-top（适合fixed定位）；
• 在导航栏下方使用一个占位div；
• 使用 scroll-margin-top 应用于锚点目标元素。

backdrop-filter 在现代浏览器中支持良好（Chrome 76+、Firefox 103+、Safari 9+、Edge 79+）。
截至2024年，全球浏览器支持率超过95%。

对于不支持的浏览器（如旧版Firefox），可以降级处理：
• 提高背景不透明度作为回退方案；
• 使用 @supports (backdrop-filter: blur(8px)) 进行特性检测；
• 在不支持时使用更深的背景色替代半透明效果。

吸顶导航栏对SEO有积极影响：
• 导航链接始终可访问，方便搜索引擎爬虫抓取；
• 降低跳出率、增加页面停留时间——这些用户行为信号间接利好SEO；
• 提升移动端体验，符合Google的移动优先索引策略；
• 结构清晰的导航有助于搜索引擎理解网站架构。

注意：确保导航栏使用语义化HTML（<nav>标签），链接使用标准的<a>标签，以便搜索引擎正确解析。