NextUI <Navbar> 组件未粘在顶部

Question

我正在帮助从未使用过 React、Next 或 Tailwinds 重构的人，让他们的项目设计更具响应性。

他们在某些地方使用了 NextUI 组件，因此在编辑导航栏时，我决定重构它，以便它利用 NextUI Navbar 组件。

我从未使用过 NextUI 作为组件，但使用过其他类似的 CSS 框架作为组件，所以我熟悉它们通常是如何工作的。然而，即使“position”属性的默认值为“sticky”，该组件似乎也没有粘在页面顶部。

导航栏组件代码减去一些脂肪

import Navbutton from "./Navbutton";
import { usePathname } from "next/navigation";
import ProfilePicture from "./ProfilePicture";
import Image from "next/image";
// import Link from "next/link";
import {
  Navbar,
  NavbarBrand,
  Link,
} from "@nextui-org/react";
import { useState } from "react";

import { api } from "~/utils/api";

export default function NavigationBar() {

  const user = api.users.getLoggedInUser.useQuery();

  const navPages = [
    { page: "Teams", comingSoon: false },
    { page: "Play", comingSoon: false },
    { page: "Matches", comingSoon: true },
  ];


  const pathname = usePathname();
  return (
    <Navbar
      className="h-50 flex w-full flex-row place-content-between items-center border-b-2 border-zinc-500 border-opacity-75 p-5"
    >


      <NavbarBrand className="hidden md:block">
        <Link href="/play">
          <Image
            className="hover:cursor-pointer"
            width={200}
            unoptimized={true}
            height={200}
            src={"/Roboverse_Animation.gif"}
            alt="VESL Logo"
          ></Image>
        </Link>
      </NavbarBrand>
      <div className="mx-auto w-[50%] px-5">
        <ul className="hidden flex-row place-content-between md:flex">
          {navPages.map((page) => {
            const pageIndex = navPages.indexOf(page);
            const isFirstOrLast =
              pageIndex == 0 || pageIndex == navPages.length - 1;
            return (
              <li className={isFirstOrLast ? "" : "mx-10"} key={pageIndex}>
                <Navbutton
                  selected={pathname == "/" + page.page.toLowerCase()}
                  page={page.page}
                  comingSoon={page.comingSoon}
                ></Navbutton>
              </li>
            );
          })}
        </ul>
      </div>
    </Navbar>
  );
}

布局代码

import React, { type ReactNode } from "react";
import { signIn, useSession } from "next-auth/react";
import Image from "next/image";
import NavigationBar from "./NavigationBar";
import VeslVerseTab from "./VeslVerseTab";

const Layout = ({ children }: { children: ReactNode }) => {
  const { data: sessionData } = useSession();

  return (
    <>
      <VeslVerseTab />
      {sessionData ? <NavigationBar /> : <Authenticate />}

      {sessionData ? children : null}
    </>
  );
};

export default Layout;

_app.tsx 应用布局的代码

import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import Layout from "./components/Layout";
import { Analytics } from "@vercel/analytics/react";
import { NextUIProvider } from "@nextui-org/react";

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <NextUIProvider>
        <Layout>
          <Component {...pageProps} />
          <Analytics />
        </Layout>
      </NextUIProvider>
    </SessionProvider>
  );
};

我检查了以下事项：

• 确保布局组件嵌套在

  _app.tsx

  中的位置不会影响它，但也许这实际上是问题，不确定。

导航栏组件上的

• 硬编码

  position="sticky"

老实说，我不确定发生了什么事，需要帮助在我失去理智之前弄清楚这一点。

编辑：

• 我使用 h-[100px] 定义了导航栏组件的高度，并确认已应用样式并将位置设置为粘性

Answer 1

导航栏组件未粘在顶部可能是因为其父容器没有定义的高度。

为了使粘性定位起作用，导航栏的父容器应该指定高度。

要解决此问题，请使用像这样的

h-screen

类：

<Navbar className="h-screen flex w-full flex-row place-content-between items-center border-b-2 border-zinc-500 border-opacity-75 p-5">

如果不起作用，则可能与页面上的其他元素存在一些样式冲突。

让我了解有关您情况的更多详细信息。