feat: add sticky effect to the readme header on the readme page

[btea]

🔗 Linked issue

Resolves #859

🧭 Context

When the README file contains a lot of content, scroll down to the next section. Anchor points should be available sticky for quick navigation to specific locations.

📚 Description

Jietu20260301-135912-HD.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 1, 2026 6:06am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 1, 2026 6:06am
npmx-lunaria	Ignored		Mar 1, 2026 6:06am

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Two package page files were modified. The primary change adds dual-readme header handling to the package details page component, introducing a separate readmeHeader reference and isReadmeHeaderPinned state. Scroll event logic was extended to compute and apply pin status for both main and readme headers. The README section template was updated to render a new readmeHeader element with sticky styling and dynamic styling based on pin state. Additionally, the page metadata scrollMargin value was adjusted from 150 to 200 pixels.

Possibly related PRs

• feat: polish colors and indents #1042 — Modifies README header positioning and layering in the same package details component, directly related to the new readmeHeader element and sticky logic.
• fix: hard-code scroll margin per-page to account for fixed header size #1504 — Updates the definePageMeta scrollMargin value in the same file, concurrent change to the same configuration setting.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the need for a sticky README header for navigation and providing context from linked issue #859.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/package/[[org]]/[name].vue (1)

1401-1405: Avoid hard-coding the README sticky offset.

Line 1403 uses top-34, which can become fragile if the main sticky header height changes (for example, wrapping package names or translated content). Prefer deriving this offset from the actual header geometry to prevent overlap.

♻️ Example refactor

-        <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 }"
-        >
+        <div
+          ref="readmeHeader"
+          class="flex sticky z-10 flex-wrap items-center justify-between mb-3 py-1 -mx-1 px-2 rounded-md transition-shadow duration-200"
+          :style="{ top: readmeHeaderTop }"
+          :class="{ 'bg-bg shadow-sm': isReadmeHeaderPinned }"
+        >

const readmeHeaderTop = computed(() => {
  const el = header.value
  if (!el) return '8.5rem'
  const top = parseFloat(getComputedStyle(el).top) || 0
  const height = el.getBoundingClientRect().height
  return `${Math.ceil(top + height)}px`
})

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f18d64e and e3774f4.

📒 Files selected for processing (2)

• app/pages/package/[[org]]/[name].vue
• app/pages/package/[[org]]/[name]/index.vue

[graphieros]

This looks very nice :)

One small detail, when the header is sticky, I feel a separation with a small spacing could be added (just like the sticky section for the package name)

[btea]

Do you mean to add space between the sticky header and the sticky part of the readme?

[graphieros]

I meant below, as you can see on the screenshot I posted before, the spacing between the readme menu button and the content is very thin

[btea]

The black background makes it a bit unclear.

Is the area I circled in the image high?

[graphieros]

In light mode the bottom border makes the separation clear, in dark mode it seems there is no border (checking on my phone so I might be wrong).

Edit:
Oh I had not seen it was a shadow.
Maybe just a border bottom with pb-2 and no border radius ?
Or just py-2 to have equal spacing around the buttons ?