网站推广制作php网站后台登陆不上
悬停头部的实现方式之一 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 使用试用账户查看实际例子。