如何用Tailwind CSS实现类似Dhruv Rathee学院网站的浮动导航栏

针对你的需求，以下是修改后的代码及关键调整说明：

修改后的完整代码 #

export function SiteHeader() {
  return (
    <header className="sticky top-[20px] z-50 w-full max-w-screen-2xl mx-auto rounded-xl shadow-sm bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="flex h-14 items-center px-4">
        <MainNav />
        <MobileNav />
        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          {/* <div className="w-full flex-1 md:w-auto md:flex-none">
            <CommandMenu />
          </div> */}
          <nav className="flex items-center">
            <Link href="" target="_blank" rel="noreferrer">
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.discord className="h-4 w-4" />
                <span className="sr-only">Discord</span>
              </div>
            </Link>
          </nav>
        </div>
      </div>
    </header>
  );
}

关键调整点 #

• 替换固定定位为粘性定位：把fixed top-0改成sticky top-[20px]，让导航栏滚动到距离顶部20px位置时固定，初始状态和顶部保持间距，实现浮动效果
• 调整导航栏宽度与圆角：添加max-w-screen-2xl mx-auto让导航栏和内部内容容器宽度一致，再加上rounded-xl给导航栏设置圆角，强化悬浮视觉感
• 优化边框与阴影：移除原有的border-b边框，改用shadow-sm阴影，让浮动效果更自然
• 调整内部容器内边距：去掉内部div的container类，换成px-4左右内边距，适配新的导航栏布局

内容的提问来源于stack exchange，提问作者Taha Ali