Simple Solution for Anchor Links Behind Sticky Headers

  You block advertising 😢
Would you like to buy me a ☕️ instead?

In my experience, customers love sticky headers. And indeed, they prove to be very useful in certain situations. But there are also terrible implementations of this pattern out there. And I cannot blame the developers who created them. Getting sticky headers right is harder than you might think.

In this article, we take a look at one of the pieces you need to solve to make sticky headers work great, rather than being a nuisance: anchor links disappearing behind sticky headers.

Sticky header covering an anchor target headline.

Sticky header covering an anchor target headline

In the past, I worked around this problem by adding some padding around potential anchor link targets. But probably the most elegant solution is to use scroll-margin-top.

// src/scss/navigation.scss

$sticky-breakpoint: 32em;

// 1. Approximate height of sticky navigation.
[id] {
  @media (min-height: $sticky-breakpoint) {
    scroll-margin-top: 100px; // 1
  }
}

.navigation {
  // ...

  @media (min-height: $sticky-breakpoint) {
    position: sticky;
    top: 0;
  }
}

As you can see in the example above, I highly recommend you to place the CSS scroll-margin-top to compensate the sticky header, as close to the styling of the sticky element itself. You have to make sure that if the height of the sticky element changes or if it’s only sticky on specific screen sizes, the scroll-margin-top is adapted accordingly.

The [id] selector targets all elements that have an id attribute because all of those potentially can become the target of an anchor link.

Anchor target with scroll-margin-top.

Anchor target with scroll-margin-top

Browser support

Browser support for scroll-margin-top is pretty good. Because I consider hidden scroll anchors a minor inconvenience more than a serious issue, you most likely we’ll be fine without using a fallback for older browsers.

Wrapping it up

Like so often, the devil is in the details. If you use a sticky header and if you also use anchor links, make sure that they work well together. Thanks to scroll-margin-top this is easy to do.

References


Do you want to learn how to build advanced Vue.js applications?

Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.



Do you enjoy reading my blog?

You can buy me a ☕️ on Ko-fi!

☕️ Support Me on Ko-fi