Sticky Margin Demo
To see the script's behavior in action: TAB down to the bottom of the page, and then start to SHIFT+TAB back up again. When keyboard focus reaches the bottom of the header, the scroll position of focused elements is adjusted as necessary, so they can't be obscured by the header.
For this demo, the behavior only applies if the viewport width is 40rem or more. For smaller viewports, the header is static rather than sticky, and so the sticky margin isn't applied.