diff --git a/theme/src/client/composables/outline.ts b/theme/src/client/composables/outline.ts index ebb4319a..bf3acf05 100644 --- a/theme/src/client/composables/outline.ts +++ b/theme/src/client/composables/outline.ts @@ -222,7 +222,7 @@ export function useActiveAnchor(container: Ref, marker: Ref< // find the last header above the top of viewport let activeLink: string | null = null for (const { link, top } of headers) { - if (top > scrollY + 92) + if (top > scrollY + 80) break activeLink = link @@ -268,8 +268,10 @@ export function useActiveAnchor(container: Ref, marker: Ref< }, { debounce: 500 }) onMounted(() => { - requestAnimationFrame(setActiveLink) - window.addEventListener('scroll', onScroll) + setTimeout(() => { + setActiveLink() + window.addEventListener('scroll', onScroll) + }, 1000) }) onUpdated(() => { diff --git a/theme/src/client/styles/normalize.css b/theme/src/client/styles/normalize.css index d92aef06..c6826472 100644 --- a/theme/src/client/styles/normalize.css +++ b/theme/src/client/styles/normalize.css @@ -23,16 +23,18 @@ html { font-size: 16px; line-height: 1.4; - scroll-padding-top: 0; + scroll-padding-top: 48px; } @media (min-width: 960px) { html { - scroll-padding-top: 80px; + scroll-padding-top: 112px; } +} - html.layout-home { - scroll-padding-top: var(--vp-nav-height, 80px); +@media (min-width: 1120px) { + html { + scroll-padding-top: 64px; } }