Scroll padding top

Wed, 28 Jan 2026 00:00:00 GMT

When you have a sticky header, clicking an anchor link can cause the target element to be hidden behind the header. TIL scroll-padding-top solves this by adding an offset to the scroll position.

I think a screenshot best describes the problem:

here I have made set the header background’s opacity to 50% so you can see when you click the anchor the header obscures the target element.

On this site, I use it in the Nav.astro component to ensure that the header height is accounted for when scrolling to a fragment:

:root {
  --header-height: 3rem;
  scroll-padding-top: var(--header-height);
}

nav {
  height: var(--header-height);
  position: sticky;
  top: 0;
}

This ensures that when a user navigates to an anchor, the top of the content is aligned with the bottom of the sticky navigation bar rather than being obscured by it.

eg:

Live demo: My 2026 posts

More details: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-top

]]>

RSS Feed for css - James Stone's Blog

Scroll padding top