如何 - 滚动标题
学习如何使用 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 位置 教程。
