Share a link to the middle of a page and the sticky header, if one exists, sits on top of the heading you wanted. The browser scrolled to the top edge; your header moved in later. Both halves of the fix are pure CSS.

/* breathe below sticky headers when anchors are hit */
[id] { scroll-margin-top: 6rem; }

/* same for hash-targeted elements, plus free feedback */
:target { scroll-margin-top: 6rem; }
h2:target {
  background: color-mix(in oklab, var(--brand) 12%, white);
  border-radius: 0.35rem;
}

How the two halves differ

  • scroll-margin-top creates spacing where scroll-to-anchor operations land, including link bookmarks and focus jumps to form errors.
  • The :target pseudo-class matches the element addressed by the URL fragment, which makes it your highlight and stay-visible hook for the section the user came for.
  • Both work when JavaScript is disabled, which is the deep-linking case standard on every static site.

Set it where links come in

  1. Detect the honest offset: scroll to an anchor in a real browser and measure how far the header overlaps; use that number, not a round guess.
  2. Give every heading an id in the markup; generated heading ids from your build count, but the ids have to exist for the margin to matter.
  3. Add the target highlight as a light, non-permanent background that does not fight dark mode.
  4. Check both behaviors in a browser with hash navigation and in print preview, where target highlighting must not leak onto paper.

Deep links are the most shared artifacts your content produces, and the gacor part of this fix is that you wrote no script and still look like one exists.