2.4.11 Conformance Shown with Non-Technical Explanation
Create space around the sticky header using CSS scroll padding. The scroll padding prevents the focusable content from being obscured when keyboard users use the tab key to navigate the key. The example on this page makes use of the W3 Schools Scroll Padding example, see the W3 Schools Terms of Use for licensing terms.
2.4.11 Conformance Shown with Technical Explanation and Markup
CSS Markup
#stickyheadercontainer
{
width: 99%;
aspect-ratio: 2.25/1;
overflow-y:scroll;
scroll-snap-type:y mandatory;
scroll-padding:2em;
}
.stickyheadersucceed
{
position: sticky;
top: 0;
}
HTML Markup
line 29 <div id="stickyheadercontainer">
line 33 <div class="stickyheadersucceed">