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 中看到這一點，內容需要滾動：