How to fix focus visible issues with sticky headers

Today, I have a quick CSS tip for anchor links and sticky headers. Sticky headers are a great design pattern for keeping important links always present, especially on mobile devices.

However, they can easily obscure interactive elements that appear behind them. This is an accessibility issue because the current focus is not always visible and can create confusion for users.

Thankfully, there’s an easy way to solve this with a CSS property called scroll-padding-top. The value provided for scroll-padding-top tells the element how far from the window top to position itself when executing a scroll action.

html, 
body {
    scroll-padding-top: 100px; /* Fixed navbar height */
}

For years, this issue required a fix using JavaScript, but now it can be resolved with just one line of CSS.

I made a quick demo of the fix, so you can see it in action.