Sticky navigation bar #nav-util.is-sticky messes with in-page references

[mozfreddyb]

This comes up in a blog post that has footnotes (Currently in preview, but you might have access? https://blog.mozilla.org/attack-and-defense/?p=246&preview=true#footnote-1):

STR:

• When clicking a footnote within the document, the browser scrolls to set the linked element to the top
• This is especially visible when using the "back arrow" from the footnotes to continue reading
• The nav-util bar is on top of the element that we scrolled to.

According to this answer on stackoverflow, we can fix this by setting the scroll-padding-top on the html element, like so:

html {
  scroll-padding-top: 2.2em; /* height of sticky header */
}

I noticed that stickyness depends on viewport size (mobile and such) and is using scss and I have not used scss. Otherwise I would have provided a pull request right away.