What is a Sticky Header/Footer?
A sticky header remains in the same place at the top of the screen when a user scrolls down a page. A sticky footer “sticks” to the bottom of the main content when it is shorter than the viewport height.
More About Sticky Header/Footers
Sticky headers and footers enable users to quickly access navigation elements without scrolling to the top or bottom of the page. These features can help increase your website’s User Experience (UX).
You can use CSS fixed positioning to make the header and footer sticky on your page. To do this, simply add the position: fixed; value to your header and footer code. Doing this will ensure these elements “stick” in place at the top and bottom of your page.
You may also need to include padding on the main body to prevent it from going underneath the header and footer. Alternatively, some plugins and WordPress page builders can set up sticky headers and footers on your website.
