悬停头部的实现方式之一 css: position: sticky

悬停头部的实现方式之一 css: position: sticky

一、需求描述

我有一个 web 日记应用，它的日记列表是基于月份分隔的，只要滚到上面，标题也会跟着滚，像这样：

我想要实现的是：
当 Header 1 这一大块处于上图这个位置的时候， Header 1 这个标题悬停在可视范围的最顶端。
当 Header 1 整个大块移出可见范围的时候，Header 1 也跟着消失，转而被下面的替代。
这种显示应该在很多场景中都看到过。
如下图：

二、实现原理

这个功能可以使用 css 的 position: sticky 来实现。
先将数据结构改为下面这样的

section: {header: '2025-09'，diaries: Array<Diary>
}

html 是这样的

<section class="diary-group"><div class="header">2025-09<div/><div class="diary-list"><div class="diary">...<div/><div/>
<section/>

将 .header 的样式设置为

.header{position: sticky;top: 0;  // 这里根据自己需要调整  header 距离 section 顶部的距离
}

三、结果

这样之后，它的行为就是：

• 当 section 未触及屏幕顶部的时候， header 处于 section 的最顶部。
• 当 section 上面超出屏幕一部分，没有完全超出屏幕的时候，header 会始终处于屏幕的最上面。
• 当 section 从上面整个超出屏幕的时候， header 也会跟着消失。

实际中的效果就是下面这样

四、实际项目例子

我已经用到了我的日记项目中，可以从这查看实际项目代码：

https://github.com/KyleBing/diary/blob/master/src/view/DiaryList/DiaryListGroup.vue

也可以访问 http://kylebing.cn/diary 使用试用账户查看实际例子。