fix: 顶部遮罩合并为横跨左右的一条
- 移除内容区 content-veil,只保留一条 fixed 遮罩 - 遮罩宽度从侧栏左边缘到内容区右边缘,左右同一水平高度 - 保留渐变与 blur(14px),验证 left=50 width=1340 top=148
This commit is contained in:
@@ -1318,11 +1318,11 @@ a.entry-href:hover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 侧栏进入滚动后,顶部做半透明虚化遮罩,避免内容被硬切 */
|
||||
.sidebar-fade {
|
||||
/* 侧栏到内容区共用一条滚动虚化遮罩,同一水平高度 */
|
||||
.scroll-fade {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
height: 56px;
|
||||
height: 64px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background: linear-gradient(
|
||||
@@ -1335,6 +1335,10 @@ a.entry-href:hover {
|
||||
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
|
||||
}
|
||||
|
||||
.scroll-fade.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-fade.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -223,17 +223,18 @@ export default function AppNext() {
|
||||
|
||||
// 独立渐隐层:固定在滚动区顶部,不随侧栏 transform 移动
|
||||
const fade = document.createElement('div')
|
||||
fade.className = 'sidebar-fade'
|
||||
fade.className = 'scroll-fade'
|
||||
fade.setAttribute('aria-hidden', 'true')
|
||||
document.body.appendChild(fade)
|
||||
|
||||
const updateFade = () => {
|
||||
if (!(sider instanceof HTMLElement)) return
|
||||
const rect = sider.getBoundingClientRect()
|
||||
fade.style.left = `${rect.left}px`
|
||||
fade.style.width = `${rect.width}px`
|
||||
const siderRect = sider.getBoundingClientRect()
|
||||
const contentRect = content.getBoundingClientRect()
|
||||
fade.style.left = `${siderRect.left}px`
|
||||
fade.style.width = `${Math.max(0, contentRect.right - siderRect.left)}px`
|
||||
fade.style.top = `${body.getBoundingClientRect().top}px`
|
||||
fade.classList.toggle('is-visible', body.scrollTop > 4 && rect.width > 0)
|
||||
fade.classList.toggle('is-visible', body.scrollTop > 4 && siderRect.width > 0)
|
||||
}
|
||||
|
||||
const updateSticky = () => {
|
||||
@@ -672,7 +673,6 @@ export default function AppNext() {
|
||||
}
|
||||
>
|
||||
<div className="content">
|
||||
<div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
|
||||
<SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
|
||||
<h1 className="sr-only">Stash 本地应用工作区</h1>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user