Header div 停留在顶部，垂直滚动 div 下方仅附有滚动条

Question

在这里，我将引导程序 class 用于sticky top header。

header.js

<header className="header sticky-top">HEADER</header>

样式表

header {
  overflow: hidden;
  padding: 20px 10px;
  display: inline-flex;
  width: 100%;
  height: fit-content;
  background-color: blue;
}

body {
  margin: 0;
  height: 100vh;
  overflow:auto;
  scroll-behavior: smooth;
}

这就是我想要达到的。

______________________
|_______header_______|
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

* = scrollbar

这是在演示代码沙箱上工作的示例项目

Answer 1

您需要将 header 组件导入您的应用程序，例如：

import Header from "./pages/Header";

并在 JSX 中实际使用它：

function App() {
  return (
    <div className="App">
      <Header></Header>

还要在 actin 中看到这一点，内容需要滚动：