JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<body>
  <header>我是一个吸顶的 Header</header>

  <div class="content">
    <p>向下滚动页面，你会看到 Header 固定在顶部。</p>
    <p>这是一段模拟滚动的长内容，你可以继续向下滚动。</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
    <p>更多内容，继续滚动...</p>
  </div>
</body>

CSS

body {
  font-family: Arial, sans-serif;
}

.content {
  height: 1500px;
  padding: 20px;
}

header {
  background-color: orange;
  color: white;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  /* 使用 position: sticky 实现吸顶 */
  position: sticky;
  top: 0;
  z-index: 1000; /* 确保吸顶时它在最前面 */
}