Header div 停留在顶部，垂直滚动 div 下面仅附加滚动条 body

Question

这里我使用 bootstrap 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

这是要处理的示例项目 demo code sandbox

Answer 1

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

import Header from "./pages/Header";

并实际在 JSX 中使用它：

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

还要在 actin 中看到这个内容需要滚动：

Header div 停留在顶部，垂直滚动 div 下面仅附加滚动条 body

Header div stays at top, vertical scrolling div below with scrollbar only attached body

html

css

reactjs

react-bootstrap

bootstrap-4