Sticky Element using Position Sticky

If you are looking to make an element, typically, the site header sticky whether it is at the top of the page to begin with or at another position down below on the page we can use the display: sticky CSS rule to make that element stick to the top of the page when it touches the top edge of the browser.

Example what we are aiming for:

Apply the following styling to the element:

Position: sticky

Top: var(--wp-admin--admin-bar--height,0)

Z-index: 2

var(--wp-admin--admin-bar--height,0) equals the WP admin bar height, if present or 0, if admin bar is not present.

You may also want to set a background color.