【CSS】使用 sticky 实现头部固定，主体内容滚动，但是头部不动的效果

可以使用CSS中的position属性和z-index属性来实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果。

首先，在HTML中将头部和页面内容分别放在两个div中，如下所示：

<div class="header">这里是头部内容</div>
<div class="content">这里是页面主体内容</div>

然后在CSS中设置头部div的position属性为sticky，top属性为0，z-index属性为较高的数值，如下所示：

.header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

当元素的position设置为 sticky 时，元素会在正常文档流中占据其原本的位置，但当页面滚动时，元素会变为固定定位（fixed），直到它达到了指定的滚动位置，然后又会回到正常文档流中。具体来说，sticky 会在以下情况下生效：

1. 当元素在视口内，且滚动不足以使其完全消失时，元素会保持在其初始位置。
2. 一旦元素的顶部（top）达到了其包含块的顶部边界，它会变为固定定位，不再随滚动而移动。
3. 当元素的底部（bottom）达到了其包含块的底部边界时，它会解除固定定位，恢复到正常文档流中。

这使得position: sticky;非常适合于创建在页面滚动过程中保持在特定位置的导航栏、表头、侧边栏等元素。
这样头部就会固定在页面顶部了。

代码007普通

打赏 收藏 海报 链接