如何创建：滚动时的固定标题

学习如何使用 CSS 和 JavaScript 创建滚动时的固定/粘性标题。

创建滚动时的固定标题

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

设置页眉的样式；添加 position: sticky 和 top: 0，以使页眉在滚动到顶端时保持固定。

.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

元素设置为 position: sticky; 后，其位置会根据用户的滚动位置来确定。

粘性元素会根据滚动位置在相对定位和固定定位之间切换。在视口中达到给定的偏移位置之前，它保持相对定位；达到之后，它就会“粘住”在那个位置（就像 position: fixed 一样）。

注意：要使粘性定位生效，你必须至少指定 top、right、bottom 或 left 中的一个。