Fixed Header

Header positioned independently of normal document flow.

html

<div class="fh-demo">
  <header class="fh-demo__header fh-demo__header--shadow" style="height:44px;background:#241430;">Docs</header>
  <div class="fh-demo__scroll" style="padding-top:44px;">
    <p>Fixed positioning takes the header out of normal document flow, so it sits on top of content rather than pushing it down.</p>
    <p>Scroll this area and the header stays pinned to the top edge of its positioned container.</p>
    <p>A third line of body copy.</p>
    <p>A fourth line, so the scrollbar actually appears.</p>
    <p>And a fifth to be sure.</p>
  </div>
</div>
<style>
.fh-demo { position: relative; height: 170px; overflow: hidden; border: 1px solid #24143022; font: 13px/1.6 system-ui, sans-serif; color: #241430; }
.fh-demo__header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; padding: 0 14px; color: #FAF7F2; font-weight: 700; box-sizing: border-box; }
.fh-demo__header--shadow { box-shadow: 0 4px 10px rgba(36,20,48,.25); }
.fh-demo__scroll { height: 100%; overflow-y: auto; box-sizing: border-box; padding: 0 14px 14px; background: #FAF7F2; }
.fh-demo__scroll p { margin: 10px 0 0; color: #241430cc; }
</style>

tailwind

<div class="relative h-[170px] overflow-hidden border border-[#24143022] font-sans text-[13px] leading-relaxed text-[#241430]">
  <header class="absolute top-0 left-0 right-0 z-10 flex items-center px-3.5 text-[#FAF7F2] font-bold box-border fh-tw__header fh-tw__header--shadow" style="height:44px;background:#241430;">Docs</header>
  <div class="h-full overflow-y-auto box-border px-3.5 pb-3.5 bg-[#FAF7F2]" style="padding-top:44px;">
    <p class="mt-2.5 text-[#241430]/80">Fixed positioning takes the header out of normal document flow, so it sits on top of content rather than pushing it down.</p>
    <p class="mt-2.5 text-[#241430]/80">Scroll this area and the header stays pinned to the top edge of its positioned container.</p>
    <p class="mt-2.5 text-[#241430]/80">A third line of body copy.</p>
    <p class="mt-2.5 text-[#241430]/80">A fourth line, so the scrollbar actually appears.</p>
    <p class="mt-2.5 text-[#241430]/80">And a fifth to be sure.</p>
  </div>
</div>
<style>
.fh-tw__header--shadow { box-shadow: 0 4px 10px rgba(36,20,48,.25); }
</style>

react

export function FixedHeader({
  title = "Docs",
  height = 44,
  bg = "#241430",
  shadow = true,
}) {
  const lines = [
    "Fixed positioning takes the header out of normal document flow, so it sits on top of content rather than pushing it down.",
    "Scroll this area and the header stays pinned to the top edge of its positioned container.",
    "A third line of body copy.",
    "A fourth line, so the scrollbar actually appears.",
    "And a fifth to be sure.",
  ];
  return (
    <div style={{ position: "relative", height: 170, overflow: "hidden", border: "1px solid #24143022", fontFamily: "system-ui, sans-serif", fontSize: 13, lineHeight: 1.6, color: "#241430" }}>
      <header style={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 2, height, background: bg, color: "#FAF7F2", display: "flex", alignItems: "center", padding: "0 14px", fontWeight: 700, boxSizing: "border-box", boxShadow: shadow ? "0 4px 10px rgba(36,20,48,.25)" : "none" }}>{title}</header>
      <div style={{ height: "100%", overflowY: "auto", boxSizing: "border-box", padding: `${height}px 14px 14px`, background: "#FAF7F2" }}>
        {lines.map((l, i) => <p key={i} style={{ margin: "10px 0 0", color: "#241430cc" }}>{l}</p>)}
      </div>
    </div>
  );
}