如何在 Nextjs 中显示固定的导航栏？

Question

我有一个 Nextjs 应用程序，它在每个页面上显示相同的导航栏。导航栏有一个 fixed 位置。主页上显示正确（写在index.tsx）。但是当我点击一个新页面时，新页面隐藏在导航栏后面！

如果我删除 fixed 位置属性，问题就会消失。但我无法相信 Nextjs 不支持这样的基本任务。

代码很简单：

// _app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
        <Navbar />
        <Component {...pageProps} />
    </>
  );
}

export default MyApp;


// about.tsx

const About: NextPage = () => {
  return (
    <section>
      <h1>About</h1>
    </section>
  );
};

export default About 

// navbar.tsx
export default function Navbar() {
  const router = useRouter();
  return (
<nav className={styles.navbar}>
  <Link href="/">
    <Image
      src={icon.src}
      className={styles.logo}
      alt="logo"
      width={70}
      height={70}
    />
  </Link>
  <ul className={styles.list}>
    <li
      className={
        router.route === "/about" ? styles.listItemActive : styles.listItem
      }
    >
      <Link href="/about">About</Link>
    </li>
  </ul>
</nav>
  );
}

//navbar.module.css
.navbar {
  background-color: var(--dark);
  color: #fff;
  height: 80px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  position: fixed;
  z-index: 999;
}

.logo {
  cursor: pointer;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.listItem {
  cursor: pointer;
}

.listItemActive {
  cursor: pointer;
  color: var(--red);
}

如何解决这个问题？

Answer 1

如果你想要一个粘性导航栏，你可以用纯 CSS 和 position: sticky 像这样：

header, nav, main {
  padding: 1.7rem 1rem;
}

header {
  background-color: #d99;
}

nav {
  position: sticky;
  top: 2rem;
  background-color: #9d9;
}

main {
  height: 100vh;
  background-color: #99d;
}

--

<header>
    Header
</header>

<nav>
    Navbar
</nav>

<main>
    Main
</main>

Answer 2

只需在您的 css 中添加一个职位即可。

top: 0px;
right: 0px; 
left: 0px;

https://developer.mozilla.org/docs/Web/CSS/position

如何在 Nextjs 中显示固定的导航栏？

How to display a fixed navbar in Nextjs?

css

reactjs

next.js