From e3774f4a1c1a32608511f8f414754c5ccd8aa3f1 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sun, 1 Mar 2026 13:53:00 +0800
Subject: [PATCH 1/3] feat: add sticky effect to the readme header on the
 readme page

---
 app/pages/package/[[org]]/[name].vue       | 20 +++++++++++++++-----
 app/pages/package/[[org]]/[name]/index.vue |  2 +-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 93296f429..66102deed 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -33,18 +33,24 @@ const router = useRouter()
 
 const header = useTemplateRef('header')
 const isHeaderPinned = shallowRef(false)
+const readmeHeader = useTemplateRef('readmeHeader')
+const isReadmeHeaderPinned = shallowRef(false)
 const navExtraOffset = shallowRef(0)
 const isMobile = useMediaQuery('(max-width: 639.9px)')
 
-function checkHeaderPosition() {
-  const el = header.value
-  if (!el) return
+function isStickyPinned(el: HTMLElement | null): boolean {
+  if (!el) return false
 
   const style = getComputedStyle(el)
   const top = parseFloat(style.top) || 0
   const rect = el.getBoundingClientRect()
 
-  isHeaderPinned.value = Math.abs(rect.top - top) < 1
+  return Math.abs(rect.top - top) < 1
+}
+
+function checkHeaderPosition() {
+  isHeaderPinned.value = isStickyPinned(header.value)
+  isReadmeHeaderPinned.value = isStickyPinned(readmeHeader.value)
 }
 
 useEventListener('scroll', checkHeaderPosition, { passive: true })
@@ -1392,7 +1398,11 @@ const showSkeleton = shallowRef(false)
 
       <!-- README -->
       <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
-        <div class="flex flex-wrap items-center justify-between mb-3 px-1">
+        <div
+          ref="readmeHeader"
+          class="flex sticky top-34 z-10 flex-wrap items-center justify-between mb-3 py-1 -mx-1 px-2 rounded-md transition-shadow duration-200"
+          :class="{ 'bg-bg shadow-sm': isReadmeHeaderPinned }"
+        >
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <LinkBase to="#readme">
               {{ $t('package.readme.title') }}
diff --git a/app/pages/package/[[org]]/[name]/index.vue b/app/pages/package/[[org]]/[name]/index.vue
index ba122fbfc..632e87a47 100644
--- a/app/pages/package/[[org]]/[name]/index.vue
+++ b/app/pages/package/[[org]]/[name]/index.vue
@@ -2,7 +2,7 @@
 // stub page to help with paths
 definePageMeta({
   name: 'package',
-  scrollMargin: 150,
+  scrollMargin: 200,
 })
 </script>
 

From fbd5055e6fc5c7e95374b5c8c5c18c6fc5ecb3f0 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 2 Mar 2026 10:21:37 +0800
Subject: [PATCH 2/3] feat: update

---
 app/pages/package/[[org]]/[name].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 66102deed..bc05101b8 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1400,8 +1400,8 @@ const showSkeleton = shallowRef(false)
       <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
         <div
           ref="readmeHeader"
-          class="flex sticky top-34 z-10 flex-wrap items-center justify-between mb-3 py-1 -mx-1 px-2 rounded-md transition-shadow duration-200"
-          :class="{ 'bg-bg shadow-sm': isReadmeHeaderPinned }"
+          class="flex sticky top-34 z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
+          :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
         >
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <LinkBase to="#readme">

From 3c0436e1108bbbcb8902021eb004f0f66939c8d1 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 2 Mar 2026 10:49:51 +0800
Subject: [PATCH 3/3] feat: apply review

---
 app/pages/package/[[org]]/[name].vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index bc05101b8..ab0d58757 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -38,6 +38,9 @@ const isReadmeHeaderPinned = shallowRef(false)
 const navExtraOffset = shallowRef(0)
 const isMobile = useMediaQuery('(max-width: 639.9px)')
 
+const headerBounds = useElementBounding(header)
+const readmeStickyTop = computed(() => `${56 + headerBounds.height.value}px`)
+
 function isStickyPinned(el: HTMLElement | null): boolean {
   if (!el) return false
 
@@ -1400,8 +1403,9 @@ const showSkeleton = shallowRef(false)
       <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
         <div
           ref="readmeHeader"
-          class="flex sticky top-34 z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
+          class="flex sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
           :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
+          :style="{ top: readmeStickyTop }"
         >
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <LinkBase to="#readme">