操作指南 - 滚动标题
学习如何使用 CSS 创建滚动时固定/粘性标题。
如何创建滚动时固定的标题
步骤 1) 添加 HTML
示例
<div class="header" id="myHeader">
<h2>我的标题</h2>
</div>
步骤 2) 添加 CSS
样式化标题；添加 position:sticky 和 top:0 使标题在达到其滚动位置时固定。
示例
.header {
position: sticky;
top: 0;
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
自己动手试一试 »
具有 position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素在 relative 和 fixed 之间切换，具体取决于滚动位置。它相对于视口中的给定偏移位置进行定位，直到达到该位置 - 然后它“粘住”在原地（就像 position:fixed）。
注意：对于粘性定位，您必须至少指定 top、right、bottom 或 left 中的一个。
要了解更多关于 CSS 定位的信息，请阅读我们的 CSS 定位 教程。
