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.
2 comments
Carsten Sachse
Hello Sridhar,
is it possible to get a sticky section in the center of a page like a button / menu and when you scroll down the button / menu will be sticky at the top from the page.
Thanks Carsten
Sridhar Katakam
This tutorial should work for your requirement w/o any changes.