<div>
    <header></header>
    <main></main>
</div>

我们可以使用定位的两种方式来固定头部。

Fixed

header {
  position:fixed;
  top: 0;
  width: 100%;
}

main {
  margin-top: 50px;
}

Sticky

header {
  position: sticky;
  top: 0;
}

测试效果