fix: 去掉顶部遮罩,页头与搜索框改为半透明

- 删除 scroll-fade 遮罩及创建逻辑
- 页头改为 blur 并降到 55% 透明度,搜索框降到 60%
- 背景图渐隐层从 80% 调到 65%,顶部区域保持背景原色
- 验证:fades=0,header alpha=0.55,search alpha=0.60
This commit is contained in:
2026-10-31 16:34:54 +08:00
parent 7a61acfa02
commit a2155a4c89
4 changed files with 21 additions and 40 deletions
+1 -19
View File
@@ -221,22 +221,6 @@ export default function AppNext() {
const onScroll = () => setScrolled(body.scrollTop > 4)
// 独立渐隐层:固定在滚动区顶部,不随侧栏 transform 移动
const fade = document.createElement('div')
fade.className = 'scroll-fade'
fade.setAttribute('aria-hidden', 'true')
document.body.appendChild(fade)
const updateFade = () => {
if (!(sider instanceof HTMLElement)) return
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 && siderRect.width > 0)
}
const updateSticky = () => {
const viewport = body.clientHeight
const maxLeft = Math.max(0, sider instanceof HTMLElement ? sider.offsetHeight - viewport : 0)
@@ -244,7 +228,6 @@ export default function AppNext() {
if (sider instanceof HTMLElement) {
sider.style.transform = offset > 0 ? `translateY(${offset}px)` : ''
}
updateFade()
}
body.addEventListener('scroll', onScroll, { passive: true })
@@ -261,7 +244,6 @@ export default function AppNext() {
body.removeEventListener('scroll', updateSticky)
window.removeEventListener('resize', updateSticky)
observer.disconnect()
fade.remove()
body.id = ''
body.style.overflowY = ''
body.style.overflowX = ''
@@ -618,7 +600,7 @@ export default function AppNext() {
siderWidth={240}
gap={20}
headerHeight={60}
headerVariant="solid"
headerVariant="blur"
siderBordered={false}
contentPadding="none"
contentOffset={88}