Sometimes, we want to keep the header static and always on top while scrolling with CSS.
In this article, we’ll look at how to keep the header static and always on top while scrolling with CSS.
How to keep the header static and always on top while scrolling with CSS?
To keep the header static and always on top while scrolling with CSS, we can set the position style to sticky.
For instance, we write
header {
position: sticky;
top: 0;
}
to set the position of the header to sticky.
And we set top to 0 to keep it on the top of the page.
Conclusion
To keep the header static and always on top while scrolling with CSS, we can set the position style to sticky.