TIL #05: Fixed-position headers and scroll-padding

A common problem when using fixed-position headers is that it can overlap with on-page links.

For example, you might want your blog to contain a footnote, but when the user clicks on that footnote, the content is hidden behind your header:

Previously, you might have solved this by adding some height and a negative margin to the footnote links:

.footnote::before {
  content: "";
  display: block;
  height: 60px;
  margin-top: -60px;
}

Today I discovered the scroll-padding property, which enables you to solve this in a generic way, using a single rule:

html {
  scroll-padding-top: 60px;
}

Pretty neat! You can see this in action here:

Browser compatability for scroll-padding is reasonably good too, although it's not supported in IE. Can I use currently has support down as 88% usage-relative. If you're okay with dropping support for older browsers, this is a nice way to solve a fixed header overlapping on-page anchors.