Scroll-Padding Demo
This demo uses scroll-padding-top to constrain browser auto-scroll behavior, preventing focused elements from being obscured by sticky headers. It's based on the Sticky headers / footers and focus styles demo by Alastair Campbell, and is a different technique from our Sticky Margin design pattern.
To see the behavior in action: TAB down to the bottom of the page, and then start to SHIFT+TAB back up again.
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 scroll padding isn't applied.