I want fixed/sticky-aware anchoring

[aarongustafson]

Many modern websites use sticky header navigation, which doesn't play nicely with native HTML anchor navigation that scrolls to an element with the DOM id referenced in the URL fragment. This example shows how content is hidden after an anchor navigation.

The current workaround is to use JS to adjust scroll position, or to add padding-top to the element we're navigating to, which doesn't always flow nicely. Native HTML anchor navigation was very useful in the past and could still offer powerful native scrolling today if we could make the anchoring system aware of elements affixed to the top of the screen.

---

https://webwewant.fyi/wants/102/

[oddcelot]

Have you checked out scroll-margin-top yet? 🙂
Here's a demo: https://codepen.io/cferdinandi/pen/GRJvozN

You could also use this in conjunction with CSS custom properties, so you could do something like this:

:root {
  --header-offset: 3rem;
}

.some-selector {
  scroll-margin-top: var(--header-offset);
}