fix(web): 内容区顶部渐隐恢复(content-veil)

- 滚动后用 sticky 遮罩在内容顶端做 32px 渐变,避免卡片/标题被硬切
- 未滚动时 opacity 0,滚动阈值沿用 scrolled 状态(>4px)
- 尊重 reduced-motion
This commit is contained in:
stash
2026-10-29 11:33:00 +08:00
parent 22f7853bdd
commit f456829d16
2 changed files with 26 additions and 0 deletions
+23
View File
@@ -159,6 +159,29 @@
padding-bottom: var(--su-space-10);
}
/* 顶部渐隐:sticky 固定在滚动区顶端,内容从下面淡出而不是被硬切 */
.content-veil {
position: sticky;
top: 0;
z-index: 5;
height: 32px;
margin-bottom: -32px;
pointer-events: none;
opacity: 0;
background: linear-gradient(to bottom, var(--su-bg-page) 0%, transparent 100%);
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
}
.content-veil.is-visible {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.content-veil {
transition: none;
}
}
.sidebar {
display: flex;
flex-direction: column;